Ich kann in document.styleSheets.cssRules nicht auf CSS-Stile zugreifen

Question

Ich versuche, diese Funktion in Javascript zu schreiben, um eine bestimmte Objektklasse unter einem bestimmten übergeordneten Element dynamisch neu anzuordnen. Allerdings habe ich Probleme beim Umgang mit bestimmten Variablen.

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

In diesem Fall geben die Konsolenprotokolle sowohl für newGridColumn als auch für newGridRow „undefiniert“ zurück und ich bin mir nicht sicher, warum. Das Konsolenprotokoll für „cardSetlength“ gibt eine Liste von 20 Wörterbüchern zurück, die jeweils einen Regelsatz darstellen, aber jedes Wörterbuch ist leer. Ich bin mir nicht sicher, ob dies mit einer Anzeigekonvention im Konsolenprotokoll zu tun hat oder ob mein Fehler damit zusammenhängt. Irgendeine Idee, was ich hier falsch mache?

Answer 1

您应该从 CSSRule 的 style 字段访问 CSS 属性值。

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

.class {
  background-color: blue;
}

您的代码应如下所示：

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

请注意，您可以在 JavaScript 中对 CSS 属性使用驼峰式大小写，而不是括号表示法。