Comment obtenir CSSStyleSheet à partir d'un HTMLLinkElement

Question

Je veux avoir un meilleur contrôle de variable CSS via JavaScript, qui nécessite de fonctionner sur un objet CSSRule.

Voici le code JavaScript de 2 façons de l'obtenir:

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

J'ai écrit le CSS dans un fichier, donc je dois le faire à travers un élément.

Cependant, j'ai trouvé que vous ne pouvez obtenir un objet CSSStyleSheet avec une CSS CSS nulle à partir d'éléments.

link_ele.sheet.rules; // null 

Je suis st (f) rogné.

Console output

// BTW j'ai essayé this method, mais il est tout simplement pas Workin' (retourne un tableau vide), thx pour Tellin' tho @SamuilPetrov

Answer 1

J'ai trouvé la solution pour cette situation: Vous pouvez simplement remplacer la feuille de style par un élément créé.

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