使用JavaScript更改CSS样式表中的规则

Question

我想在代码中动态地修改类的规则 （使用JavaScript）。 我有一个styles.scss文件，其中有一个.grid.grid-radial类。 我想使用JavaScript向该类添加和删除规则。

.grid.grid-radial {
  background-image: -webkit-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
}

我明白，我可以使用insertRule（）和deleteRule（） ，但我是什么叫他们吗？

如何获得对styles.scss文件的引用，以便可以修改其属性？

注：（ '＃grid.grid径向'）。我不想使用document.querySelector setAttributes（ “风格”，...）

Answer 1

您可以通过document.styleSheets属性访问与页面关联的样式表。 您可以通过匹配完整的href路径来搜索特定的样式表，如下所示：

const sheet = Array.from(document.styleSheets).find(s => s.href === 'https://mywebsite.com/css/mySheet.css');

如果您确信不会重复，则可以通过更改查找功能以使用简称来使自己更轻松：

const sheet = Array.from(document.styleSheets).find(s => s.href.includes('mySheet.css');

如前所述，您可以从那里调用sheet.insertRule和sheet.deleteRule。

要注意的一件事是浏览器本身无法本地解释SASS / LESS文件。 在构建步骤中应该发生的是，将scss文件编译为一个css文件，以供浏览器读取。 您需要以该css文件为目标来修改规则-即使该scss文件已发布到您的网站（例如，用于源映射），对其进行更改也不会影响该网站。