如何从HTMLLinkElement获取CSSStyleSheet

Question

I want to have a better CSS variable control through JavaScript, which requires to operate on a CSSRule object.

Here's the JavaScript code of 2 ways to get it:

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

I've written the CSS in a file, so I have to get it through a element.

However, I found that you can only get a CSSStyleSheet object with a null CSSRule from elements.

link_ele.sheet.rules;  // null

I'm st(f)ucked.

Console output

// btw i've tried this method , but it's just ain't workin' (returns an empty array), thx for tellin' tho @SamuilPetrov

Answer 1

I've found the solution for this situation: You can simply overwrite the style sheet with a created element.

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;
});