Blazor中如何重置/更新用户使用resize功能时浏览器生成的内联样式

算力阿峰

2026-10-17

解决方案

核心原因

浏览器触发resize操作时，直接修改DOM的内联height属性，不属于Blazor的状态跟踪范围，你绑定的reset变量仅能更新Blazor感知范围内的style内容，无法覆盖浏览器额外添加的height属性。
内联样式优先级高于普通类选择器样式，加!important又会强制覆盖内联样式，导致手动resize失效，本质是优先级冲突的问题。

最优解决方法

每次点击切换尺寸的按钮时，主动清空容器的内联height属性即可，无需修改现有CSS逻辑，有两种实现方式：

方式1：使用Blazor元素引用（推荐，.NET 7+支持）

给容器元素添加@ref绑定：

<div @ref="TerminalRef" class="terminal_in_body terminal_size-@terminalSize">

调整C#逻辑：

@code {
    ElementReference TerminalRef;
    int terminalSize = 1; 

    public async Task Collaps()
    {
        terminalSize++;
        if(terminalSize > 4)
            terminalSize = 0;
        // 清空内联height属性，让类的height规则生效
        await TerminalRef.SetStylePropertyAsync("height", string.Empty);
        StateHasChanged();
    }
}

方式2：调用JS实现（兼容低版本.NET）

注入IJSRuntime：

@inject IJSRuntime JS

调整C#逻辑：

public async Task Collaps()
{
    terminalSize++;
    if(terminalSize > 4)
        terminalSize = 0;
    // 调用JS清空容器的内联height
    await JS.InvokeVoidAsync("eval", "document.querySelector('.terminal_in_body').style.height = ''");
    StateHasChanged();
}