这可以通过对CSSStyleDeclaration对象使用setProperty()方法来完成.CSSStyleDeclaration接口表示一个作为CSS声明块的对象，并公开样式信息和各种与样式相关的方法和属性.在你的问题中，你分享了

console.log(sheet.rules[y].selectorText)

它包含作为第六个键/值对的CSSStyleDeclaration对象.要访问该对象，我们可以通过使用

document.styleSheets[x].cssRules[y].style

在您的问题中，您已经在sheet变量中包含了CSSStyleSheet，所以我们将其重写为

sheet.cssRules[y].style

然后，我们可以修改现有的css定制属性，或者使用setProperty()方法在声明块中创建一个新的属性(如果它还没有键/值对).CSSStyleDeclaration.setProperty()方法接口为CSS样式声明对象上的属性设置新值.

Syntax

setProperty(propertyName, value)
setProperty(propertyName, value, priority)

参数

propertyName个

一个字符串，表示要修改的CSS属性名称(连字符大小写).

value个可选

包含新属性值的字符串.如果未指定，则将其视为空字符串.

priority个可选

允许设置!important css优先级的字符串.如果未指定此项，则将其视为空字符串.接受下列值:

• 字符串值"important"
• 关键词undefined
• 字符串空值""

返回值

无(undefined)

例外情况

NoModificationAllowedError DOMException 如果属性或声明块是只读的，则会引发此错误.

Alternative Usage

如果可以省略priority，则可以使用以下语法:

Style.cssPropertyName="Value"；

SOLUTION

根据您的问题、代码样例和 comments ，您正在try 实现的内容听起来与MDN Web文档的setProperty文档页面上列出的示例非常相似.

在您的项目中，有三个可以设置为在调色板生成器中动态更改色样亮度、色度和色相的输入.

我们知道，为了实现这一点需要更改的规则包含在您创建并存储在sheet变量中的CSSStyleSheet中.因此，我们可以遍历该样式表中包含的规则，这些规则位于stylesheet.cssRules数组中.对于每个 Select 器，我们将判断其CSSStyleRule.electorText属性是否等于 Select 器.color3.shade500，这就是我们要寻找的 Select 器.

如果找到匹配项，则需要在变量中存储对此CSSStyleRule对象的引用.然后，我们可以使用新值更新规则.这是使用setProperty()方法完成的.

if (".color3.shade500" === sheet.cssRules[y].selectorText) {
  let styleInstance = sheet.cssRules[y].style;
  styleInstance.setProperty("--lightness", lightness);
}

CSSStyleSheet CSSStyleDeclaration setProperty()