javascript - 如何从 HTMLLinkElement 获取 CSSStyleSheet

Question

我想通过 JavaScript 更好地控制 CSS 变量，这需要对 CSSRule 对象进行操作。

这是获取它的 2 种方法的 JavaScript 代码：

// get from the CSSStyleSheet of a <style> element
document.getElementsByTag('style')[0].sheet.rules;
// direct way
document.styleSheets[0].rules;

我已经在一个文件中编写了 CSS，所以我必须通过一个元素来获取它。

但是，我发现您只能从元素中获取带有 null CSSRule 的 CSSStyleSheet 对象。

link_ele.sheet.rules;  // null

我被 st(f)ucked 了。

控制台输出

//顺便说一句，我已经尝试过这个方法，但它只是不起作用（返回一个空数组），谢谢@SamuilPetrov

Answer 1

我找到了这种情况的解决方案：您可以简单地用创建的元素覆盖样式表。

let style = { };
let setCSSVariable = (name, value) => style.rules.setProperty('--' + name, value);
document.addEventListener('DOMContentLoaded', function() {
    style.element = document.createElement('style');
    document.head.appendChild(style.element);

    style.sheet = style.element.sheet;
    style.sheet.insertRule(/* CSS selector */);

    style.rules = style.sheet.cssRules[0].style;
});