我無法存取 document.styleSheets.cssRules 中的 CSS 樣式

Question

我正在嘗試用 javascript 編寫此函數，動態地重新排列特定父元素下的特定物件類別。但是，我在處理某些變數時遇到了問題。

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

在這種情況下，newGridColumn 和 newGridRow 的控制台日誌都返回“未定義”，我不確定為什麼。 cardSetlength 的控制台日誌傳回一個包含20 個字典的列表，每個字典代表一個規則集，但每個字典都是空的，我不確定這是否與控制台日誌中的某些顯示約定有關，或者與我的錯誤有關。知道我在這裡做錯了什麼嗎？

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 屬性使用駝峰式大小寫，而不是括號表示法。