Saya tidak boleh mengakses gaya CSS dalam document.styleSheets.cssRules

Question

Saya cuba menulis fungsi ini dalam javascript untuk menyusun semula kelas objek tertentu secara dinamik di bawah elemen induk tertentu. Walau bagaimanapun, saya menghadapi masalah mengendalikan pembolehubah tertentu.

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

Dalam kes ini, konsol log untuk kedua-dua newGridColumn dan newGridRow mengembalikan "undefined" dan saya tidak pasti mengapa. Log konsol untuk cardSetlength mengembalikan senarai 20 kamus, setiap satu mewakili set peraturan, tetapi setiap kamus kosong, saya tidak pasti sama ada ini ada kaitan dengan beberapa konvensyen paparan dalam log konsol atau jika ralat saya berkaitan. Ada idea apa yang saya buat salah di sini?

Answer 1

Anda harus mengakses nilai sifat CSS dari CSSRule 的 style medan.

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

.class {
  background-color: blue;
}

Kod anda sepatutnya kelihatan seperti ini:

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

Perhatikan bahawa anda boleh menggunakan camelCase untuk sifat CSS dalam JavaScript dan bukannya notasi kurungan.