如何在Blazor中更改CSS或"body“元素的类
我目前正在制作一个“更改主题”按钮，这样我就可以在“黑暗模式”和“光模式”之间切换整个页面。但我找不到办法改变整页的背景颜色。
基本上，我需要改变<body>的风格(这是我能想到的唯一方法)。我的想法是，当您单击“更改主题”按钮时，<body>元素将被添加一个类“黑暗主题”。然后，我简单地在CSS中定义“黑暗主题”，如下所示：
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呢？或者如果你有其他的解决办法，请告诉我。谢谢!
回答 3
Stack Overflow用户
发布于 2020-05-07 22:48:45
或者，如果您想要纯C#代码而不使用blazor：
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制作的一段视频，如果你想看的话：
Stack Overflow用户
发布于 2020-08-24 15:12:40
巴兹尔应该有一个简单的方法来做这件事，但是，目前还没有，希望有一天会很快。
我做了一个组件来解决这个问题。它允许您从页面或组件中设置页面主体元素的CSS类。您还可以设置lang属性和dir属性来设置页面的语言和文本方向。这些是我认为您可能想要更改的所有属性，但是如果需要，您可以添加更多的属性。
您可以在这里下载代码：https://github.com/BenjaminCharlton/BlazorBody
或者，这里总结了如何做到这一点：
scripts/BodyElement.js中的
- 创建一个小JavaScript文件来操作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;
}
- 在index.html
一节中放置到您的JavaScript的链接
<script src="/script/bodyelement.js"></script>
- 创建了一个小的CSS类来测试结果。
body {
background: white;
color: black;
}
body.danger {
background: red;
color: white;
}
- 制作了一个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;
}
- 将BodyElement剃刀组件放置在您希望操作标记的任何页面上，并设置属性
。
@page "/danger"
<BodyElement CssClass="danger" />
Stack Overflow用户
发布于 2020-05-07 14:19:17
只需注入IJSRuntime并使用它调用JavaScript函数来进行此更改。
在你的组成部分中：
[Inject]
IJSRuntime JSRuntime { get; set; }然后：
private async Task ThemeChanged()
{
isDark = !isDark;
await JSRuntime.InvokeVoidAsync("MyInterop.ChangeTheme", isDark);
}在你的JS中：
window.MyInterop = (function () {
const _changeTheme = function (isDark) {
if (isDark)
document.body.classList.add('dark-theme');
else
document.body.classList.remove('dark-theme');
};
return {
ChangeTheme: _changeTheme
};
})();如果您还没有这样做，请在_Host.cshtml中引用JS文件，在添加Blazor运行时的行之后。
https://stackoverflow.com/questions/61659727
复制相似问题
腾讯云开发者
