Ste*_* Z. 6 html css asp.net asp.net-core blazor
我目前正在制作一个“更改主题”按钮，以便我可以在“深色模式”和“浅色模式”之间切换整个页面。但我找不到改变整个页面背景颜色的方法。
基本上，我需要改变风格<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 呢？或者如果您有任何替代解决方案，请告诉我。谢谢你！
Blazor 应该有一个简单的方法来做到这一点，但目前还没有。希望很快就会有一天。
我做了一个组件来解决这个问题。它允许您从页面或组件设置页面主体元素的 CSS 类。您还可以设置 lang 属性和 dir 属性来设置页面的语言和文本方向。这些是我认为您可能想要更改的所有属性，但如果需要，您可以添加更多属性。
您可以在此处下载代码： https: //github.com/BenjaminCharlton/BlazorBody
或者这里总结了如何做到这一点：
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;
}<script src="/script/bodyelement.js"></script> body {
background: white;
color: black;
}
body.danger {
background: red;
color: white;
}@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;
} @page "/danger"
<BodyElement CssClass="danger" />只需注入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添加 Blazor 运行时，请在 , 中引用您的 JS 文件。
小智 0
或者，如果您想要不带 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 制作的视频：
| 归档时间： |
|
| 查看次数： |
15543 次 |
| 最近记录： |