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

我＆＃39; m（f）ucked。

Console output

//顺便说一句，我已经尝试this method了，但它只是在努力工作。（返回一个空数组），thx for tellin＆＃39; @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;
});

如何从HTMLLinkElement获取CSSStyleSheet

1 个答案: