问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何更改 Blazor 中“body”元素的 CSS 或类

社区维基
1
新手上路，请多包涵

我目前正在制作一个“更改主题”按钮，以便我可以在“深色模式”和“浅色模式”之间切换整个页面。但是我找不到改变整个页面背景颜色的方法。

基本上，我需要更改 <body> 的样式（这是我唯一能想到的方法）。我的想法是，当您单击“更改主题”按钮时， <body> 元素将添加一个类“dark-theme”。然后我只是简单地在 CSS 中定义“深色主题”，如下所示：

 body {
    background-color: #FFFFFF;
    color: #000000;
}

    body.dark-theme {
        background-color: #5A5A5A;
        color: #F2F2F2;
    }

我认为这很有道理，但正如您在下面看到的，我无法访问 <body> 元素，因此我无法添加类或更改它的 CSS。

主布局.razor

 @inherits LayoutComponentBase
@using System.Web;
<div class="sidebar">
    <NavMenu />
</div>

<div>
    <LoginDisplay />
    <button id="change-theme-btn" @onclick="ThemeChanged">Change Theme</button>
    @Body
</div>

@code {
    bool isDark = false;
    private void ThemeChanged()
    {
        isDark = !isDark;
    }
}

那么如何更改 <body> 元素的类或 CSS？或者，如果您有任何替代解决方案，请告诉我。谢谢！

原文由 Stephen Z. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssasp.netasp.net-coreblazor
阅读 1k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

或者，如果您想要没有 blazor 的纯 C# 代码：

 public string BackgroundImage { get; set; }

<style>
    body
    {
        background-image: url(@BackgroundImage);
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: darkgray;
        overflow: hidden;
    }
</style>

或者，我使用 Nuget 包 BlazorStyled：

https://github.com/chanan/BlazorStyled

这是一个示例：

 <Styled @bind-Classname="CanvasStyle">
    position: fixed;
    top: 18vh;
    left: 5%;
    width: 60%;
    height: 64vh;
</Styled>

<div class=@CanvasStyle></div>

如果您想观看，这是我为 BlazorStyled 制作的视频：

https://youtu.be/frtetHgfdIo

原文由 user12228709 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

Blazor 应该有一种简单的方法来执行此操作，但目前还没有。希望它很快就会有一天。

我做了一个组件来解决这个问题。它允许您从页面或组件设置页面正文元素的 CSS 类。您还可以设置 lang 属性和 dir 属性来设置页面的语言和文本方向。这些是我认为您可能想要更改的所有属性，但如果需要，您可以添加更多。

您可以在此处下载代码： https ://github.com/BenjaminCharlton/BlazorBody

或者这里是如何做的总结：

  1. 制作一个小的 JavaScript 文件来操作 scripts/BodyElement.js 中的 body 元素
     var getBodyElement = function() {
        return document.getElementsByTagName("body")[0];
    }

    var addCssClassToBody = function (cssClass) {
        var body = getBodyElement();

        if (!body.classList.contains(cssClass)) {
            body.classList.add(cssClass);
        }
    }


    var setLanguageOfBody = function (language) {
        var body = getBodyElement();
        body.lang = language;
    }

    var setTextDirectionOfBody = function (direction) {
        var body = getBodyElement();
        body.dir = direction;
    }
  1. 在 index.html 部分放置指向您的 JavaScript 的链接
 <script src="/script/bodyelement.js"></script>
  1. 制作一个小的 CSS 类来测试结果。
     body {
        background: white;
        color: black;
    }

    body.danger {
        background: red;
        color: white;
    }
  1. 制作一个 BodyElement 剃须刀组件，您可以将其放置在任何页面上，并且可以从该页面设置属性。
 @inject IJSRuntime JSRuntime
@code {
    protected async override Task OnParametersSetAsync()
    {
        if (CssClass is { })
            await JSRuntime.InvokeVoidAsync("addCssClassToBody", CssClass);

        if (Language is { })
            await JSRuntime.InvokeVoidAsync("setLanguageOfBody", Language);

        if (TextDirection is { })
            await JSRuntime.InvokeVoidAsync("setTextDirectionOfBody", TextDirection);
    }

    [Parameter]
    public string? CssClass { get; set; } = null;

    [Parameter]
    public string? Language { get; set; } = null;

    [Parameter]
    public string? TextDirection { get; set; } = null;
}
  1. 将 BodyElement razor 组件放在您希望操作标签并设置属性的任何页面上
     @page "/danger"
        <BodyElement CssClass="danger" />

原文由 benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题