时间戳

首页 > 解决方案 > 如何在 Blazor 中使用 C# 动态更改 HTML 背景

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

问题描述

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 应用程序中获得相同的结果？

标签： c#htmlasp.netblazorwebassembly

解决方案

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

<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();
    }
}

推荐阅读