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@code {private async Task UpdateThemeColor(string color) {await JSRuntime.InvokeVoidAsync("setCssVar", "--primary-color", color);}}
这样就能把 --primary-color 应用到整个页面（作用于 :root）。如果只想作用于某个元素，把 document.documentElement 换成对应元素引用（见下一条）。
为特定元素设置 CSS 变量
适合局部样式控制，比如卡片背景、按钮悬停色等。
立即学习“前端免费学习笔记（深入）”；
先用 @ref 获取 DOM 元素引用：
...@code {private ElementReference cardElement;
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 GetPrimaryColor() { return await JSRuntime.InvokeAsync("getCssVar", "--primary-color");}
注意返回值可能为空字符串或带空格，建议调用后做 .Trim() 处理。
封装成可复用的服务（进阶）
避免每个组件都写 JS 调用，可以封装一个 CssVariableService：
定义服务类（Services/CssVariableService.cs）：
public class CssVariableService{ private readonly IJSRuntime _jsRuntime;public CssVariableService(IJSRuntime jsRuntime) => _jsRuntime = jsRuntime;
public ValueTask SetRoot(string property, string value) =>_jsRuntime.InvokeVoidAsync("setCssVar", property, value);
public ValueTask GetRoot(string property) =>_jsRuntime.InvokeAsync("getCssVar", property);}
注册服务（Program.cs）：
builder.Services.AddScoped();
组件中直接使用：
@inject CssVariableService CssVars@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 局部）。
以上就是Blazor 怎么用 C# 操作 CSS 变量的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1443234.html
微信扫一扫 
支付宝扫一扫 
