Blazor中C#需通过jsRuntime调用javaScript操作css变量，核心是set/get style.setProperty与getComputedStyle；全局用document.documentElement，局部用ElementReference；须带–前缀，可封装为服务复用。
Blazor 中可以用 C# 动态设置或读取 CSS 变量（Custom Properties），核心是通过 JSRuntime 调用 javascript 操作 style.setProperty 或 getComputedStyle，因为 C# 无法直接访问 CSSOM。不过 Blazor 提供了简洁的互操作方式，配合少量 JS 就能高效完成。
在组件中设置 CSS 变量
最常用场景是根据状态动态更新主题色、尺寸等。需要两步：定义 JS 函数 + C# 调用。
- 在
wwwroot/js/site.js（或_Host.cshtml中）添加：
window.setCssvar = (property, value) => { document.documentElement.style.setProperty(property, value); };- 在 Blazor 组件（如
.razor）中注入并调用：
@inject IJSRuntime JSRuntime <p>@code { private async Task UpdateThemeColor(string color) { await JSRuntime.InvokeVoidAsync("setCssVar", "--primary-color", color); } }这样就能把 --primary-color 应用到整个页面（作用于 :root）。如果只想作用于某个元素，把 document.documentElement 换成对应元素引用（见下一条）。
为特定元素设置 CSS 变量
适合局部样式控制，比如卡片背景、按钮悬停色等。
立即学习“前端免费学习笔记（深入）”；
- 先用
@ref获取 dom 元素引用：
<div @ref="cardElement" class="card">...</div> <p>@code { private ElementReference cardElement;</p><p>private async Task SetCardBg(string hex) { await JSRuntime.InvokeVoidAsync("setElementCssVar", cardElement, "--card-bg", hex); } }- 对应 JS 函数：
window.setElementCssVar = (element, property, value) => { element.style.setProperty(property, value); };从 C# 读取当前 CSS 变量值
适用于响应式逻辑判断，比如根据主题色自动切换文字对比度。
- JS 端提供读取函数：
window.getCssVar = (property) => { return getComputedStyle(document.documentElement).getPropertyValue(property).trim(); };- C# 中调用并处理结果：
private async Task<string> GetPrimaryColor() { return await JSRuntime.InvokeAsync<string>("getCssVar", "--primary-color"); }注意返回值可能为空字符串或带空格，建议调用后做 .Trim() 处理。
封装成可复用的服务（进阶）
避免每个组件都写 JS 调用，可以封装一个 CssVariableService：
- 定义服务类（
Services/CssVariableService.cs）：
public class CssVariableService { private readonly IJSRuntime _jsRuntime; <p>public CssVariableService(IJSRuntime jsRuntime) => _jsRuntime = jsRuntime;</p><p>public ValueTask SetRoot(string property, string value) => _jsRuntime.InvokeVoidAsync("setCssVar", property, value);</p><p>public ValueTask<string> GetRoot(string property) => _jsRuntime.InvokeAsync<string>("getCssVar", property); }- 注册服务（
Program.cs）：
builder.Services.AddScoped<CssVariableService>();- 组件中直接使用：
@inject CssVariableService CssVars <p>@code { private async Task ToggleDarkMode() { var current = await CssVars.GetRoot("--bg-color"); await CssVars.SetRoot("--bg-color", current == "#1a1a1a" ? "#ffffff" : "#1a1a1a"); } }基本上就这些。关键点在于：C# 不直接操作样式表，而是靠 JS 桥接；变量名必须带两个短横线（--my-var）；作用域决定影响范围（:root 全局，元素 style 局部）。