Je ne peux pas accéder aux styles CSS dans document.styleSheets.cssRules

Question

J'essaie d'écrire cette fonction en javascript pour réorganiser dynamiquement une classe d'objet spécifique sous un élément parent spécifique. Cependant, j'ai du mal à gérer certaines variables.

const styleSheet = Array.from(document.styleSheets[0].cssRules);
 //filter to create list that contains only "cartelle" class rulesets 
const myRules = styleSheet.filter(ruleset => ruleset.selectorText.includes("cartelle"))

 //iterate along each ruleset in the list
let cardSetLength = Object.keys(myRules).length;
console.log(cardSetLength);
for (let i = 0; i < cardSetLength; i++) {
  //obtain value of the following properties in given ruleset
  let newGridColumn = myRules[i][`grid-row-start`];
  let newGridRow = myRules[i][`grid-column-start`];
  console.log(newGridColumn);
  console.log(newGridRow);
}

.cartelle {
  grid-row-start: 42;
  grid-column-start: 69;
}

Dans ce cas, les journaux de la console pour newGridColumn et newGridRow renvoient "undefined" et je ne sais pas pourquoi. Le journal de la console pour cardSetlength renvoie une liste de 20 dictionnaires, chacun représentant un ensemble de règles, mais chaque dictionnaire est vide, je ne sais pas si cela a à voir avec une convention d'affichage dans le journal de la console, ou si mon erreur est liée. Avez-vous une idée de ce que je fais de mal ici ?

Answer 1

Vous devez accéder aux valeurs des propriétés CSS à partir des champs CSSRule 的 style.

console.log(document.styleSheets[0].cssRules[0].backgroundColor); // undefined
console.log(document.styleSheets[0].cssRules[0].style.backgroundColor);

.class {
  background-color: blue;
}

Votre code devrait ressembler à ceci :

for (const rule of myRules) {
    let newGridColumn = rule.style[`grid-row-start`];
    let newGridRow = rule.style[`grid-column-start`];
    // ...
}

Notez que vous pouvez utiliser camelCase pour les propriétés CSS en JavaScript au lieu de la notation entre crochets.