Is there a way to access DOM in Blazor?

Currently, Blazor doesn’t provide any direct way to access the browser’s DOM or APIs. But there is an option to invoke/call JavaScript functions via JS Interop, thereby letting Blazor access the DOM and its APIs. In the below example we have accessed the button’s DOM element in the script by using javascript interop.

[_Host.cshtml/index.html]

<script>
function accessDOMElement() {
    var btn;
    // access DOM here
    btn = document.getElementById('btn');
    btn.innerText = "Button Textchanged";
}
</script>
[index.razor]

@page "/"
@inject IJSRuntime jsRuntime

<h1>@Title</h1>

<button id="btn" @onclick="UpdateTitle">Update Title</button>

@code {
    private string Title { get; set; } = "Hello, World!";

    private async void UpdateTitle()
    {
        await jsRuntime.InvokeAsync<object>("accessDOMElement");
        Title = "Hello, Blazor!";
    }
}

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.