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 文件的引用，以便我可以修改它的属性？

注意：我 NOT 想要使用document.querySelector（＆＃39;＃。grid.grid-radial＆＃39;）。setAttributes（＆＃34） ;风格＆＃34;，...）

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

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

1 个答案: