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

【问题标题】：Change the rules in a CSS stylesheet with JavaScript使用 JavaScript 更改 CSS 样式表中的规则
【发布时间】：2018-05-02 19:30:00
【问题描述】：

我想在代码中动态修改类的规则（使用 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 文件的引用以便修改它的属性？

注意：我确实不想使用 document.querySelector('#.grid.grid-radial').setAttributes("style", ...)

【问题讨论】：

为什么不直接创建另一个 CSS 块并切换元素的类属性？
长话短说，我正在使用 Angular 和 Typescript，并且我已经在使用 [ngStyle] 来设置背景位置和背景大小，所以我不能只更改元素的样式属性（这很复杂） .我必须更改它的类，这就是为什么我想使用 insertRule() 和 deleteRule() 但不知道如何调用它们。
这就是为什么我建议创建另一个 CSS 块，并给它一个有意义的类名，然后切换元素的类。
用户会改变很多颜色，所以我不想在每次选择新颜色时创建数千个新的 CSS 类并将 div 链接到它们。您能否参考一些有关如何完成此操作的链接？我对 CSS 相当陌生，所以我不知道如何继续您的解决方案。
为什么你认为你需要成千上万的 CSS 类？这个色轮会有多少种颜色？

标签： javascript css domdocument

【解决方案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 文件已发布到您的网站（例如用于源映射），更改它也不会影响网站。

【讨论】：

'mySheet.css' 应该是代码正确的javascript/typescript文件中styles.scss文件的相对路径？另外，扩展名应该是css而不是scss。我的工作表未定义，我正在尝试调试
道歉。如果您确信不会重复，则可以使用相对路径，或者您需要完整路径（在 styleSheet 对象的 href 属性中找到）。我会更新我的答案以反映这一点。