我正在尝试用 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 个字典的列表,每个字典代表一个规则集,但每个字典都是空的,我不确定这是否与控制台日志中的某些显示约定有关,或者与我的错误有关。知道我在这里做错了什么吗?
P粉4623289042023-09-09 09:16:47
您应该从 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 属性使用驼峰式大小写,而不是括号表示法。