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 写在一个文件里了，所以我必须通过一个元素来获取它。

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

link_ele.sheet.rules;  // null

我很生气。

Console output

//顺便说一句，我试过了 this method ，但它只是行不通(返回一个空数组)，感谢@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;
});