时间戳

首页 > 解决方案 > 如何在 Blazor 中更改 CSS 或“body”元素的类

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

问题描述

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

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

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

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

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

MainLayout.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 呢？或者如果您有任何替代解决方案，请告诉我。谢谢！

标签： htmlcssasp.netasp.net-coreblazor

解决方案

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 剃须刀组件放置在您希望操作标签并设置属性的任何页面上

    @page "/danger"
        <BodyElement CssClass="danger" />

推荐阅读