使用原生JavaScript修改CSSStyleSheet中的样式规则属性

云原生阿岚

2026-7-11

解决方案

要在保留其他属性的前提下更新单个CSS自定义属性，直接操作目标CSSStyleRule的style对象即可，无需使用replace()（该方法会替换整个规则，效率低且容易出错）。

具体操作

拿到你已经定位到的目标CSSStyleRule对象（即sheet.rules[y]）
通过style.setProperty()方法修改指定自定义属性，或直接通过属性赋值操作

示例代码

假设要将--lightness的值更新为50：

// 获取目标规则
const targetRule = sheet.rules[y];

// 方法1：使用setProperty（推荐，兼容所有CSS属性名格式）
targetRule.style.setProperty('--lightness', '50');

// 方法2：直接属性赋值（对自定义属性同样有效）
targetRule.style['--lightness'] = '50';

以上操作只会修改指定属性，--chroma和--hue会保持原有值不变。

完整动态更新示例

如果要根据页面输入值实时更新：

// 初始化样式表
let sheet = new CSSStyleSheet();
sheet.insertRule(".color3.shade500 {--lightness: 0; --chroma: 0; --hue: 0}");

// 封装查找目标规则的函数
function getTargetRule(sheet, selector) {
  for (let i = 0; i < sheet.rules.length; i++) {
    if (sheet.rules[i].selectorText === selector) {
      return sheet.rules[i];
    }
  }
  return null;
}

// 获取目标规则
const targetRule = getTargetRule(sheet, '.color3.shade500');

// 从输入框获取值并更新
const newLightness = document.getElementById('lightness-input').value;
if (targetRule) {
  targetRule.style.setProperty('--lightness', newLightness);
}