如何在 Blazor 中使用 C# 动态更改 HTML 背景答案

【问题标题】：How to dynamically change HTML background using C# in Blazor如何在 Blazor 中使用 C# 动态更改 HTML 背景
【发布时间】：2021-03-24 10:53:58
【问题描述】：

Javascript 可以轻松地操纵 DOM 元素以及 css 来动态改变应用程序的外观。我想在 blazor 应用程序中使用 c# 动态更改 DOM 元素的背景图像。

document.getElementById('the_body').style.backgroundImage = "something.gif"


$('body').css('backgroundImage', 'url(something.gif)');

body
{
    background: #000000 url(images/back_all.gif) repeat-x top;
    font: 12px Tahoma, Arial, Helvetica, sans-serif;
    color: #666666;
}

如何在 C# Blazor 应用程序中获得相同的结果？

【问题讨论】：

它会不会与任何其他脚本不同，其中@code 块修改字符串变量@v（包含一个图像的url，或一个css 类的名称）所以我包含一个不同的 URL/css 类，标记规定元素样式的背景/css 类应使用 @v?比如one way might be（感觉这个问题很简单，以至于我怀疑我是不是误会了什么？？）
检查这个答案，似乎你应该设置类名 stackoverflow.com/questions/58280795/… ，或者需要将样式设置为字符串
Caius Jard 这可能是一个简单的问题，但从 Bassie 的回复来看，当我点击链接时，似乎 Blazor 目前无法直接与 CSS 交互。我想像 JScript 那样直接与 css 文档交互。我知道如果我在我的 HTML 文档中编写内联样式，我可以使用 @code 块来做一些事情。请原谅我的语法。英语不是我的母语
看看这个来源。 github.com/BrianLParker/CleanView

标签： c# html asp.net blazor webassembly

【解决方案1】：

要更改组件中元素的背景（或任何相关内容），您可以声明私有字段，或使用一些类似的模式：

<div style="background-image: url(@backgroundUrl)">
</div>
<button type="button" @onclick="ChangeBackground">Change above div's background</button>

@code {
    string backgroundUrl = "default.jpg";

    private void ChangeBackground()
    {
        backgroundUrl = "some-other-image.jpg";
        StateHasChanged();
    }
}

【讨论】：