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

Question

Javascript can easily manipulate DOM elements as well as css to dynamically change the appearance of the application. I would like to dynamically change the background image of the DOM element dynamically using c# in a blazor application.

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

How do I obtain the same result in C# Blazor application?

Answer 1

To change the background (or anything for that matter) of an element that you have in a component, you can declare private fields, or use some similar pattern:

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