Question

这实际上并不需要太多内容，因为代码本身是可以自我解释的。但是，只需逃避编写此上下文的条件。怎么样更改样式表的cssRule的cssText，以更新样式元素的innerHTML吗？

HTML：

<style>
    body {
        background-color: blue;
    }
</style>

JS：

var style = document.getElementsByTagName('style')[0];

var sheet = style.sheet;

sheet.cssRules[0].style.backgroundColor = 'green'; // body changes to green.

sheet.cssRules[0].cssText;  // returns "body { background-color: green; }"

style.innerHTML;  // returns "body { backgrounds color: blue; }"

如何与cssRule一起更改样式的innerHTML？

Answer 1

HTML标记通常是 markup ，而不是动态更改非标记数据，因为您在动态样式表中使用了它。如果要更改innerHTML，则必须收集所有cssRules的新文本，并明确地重新分配innerHTML元素的style。

（类似地，如果您在脚本标签内重新分配变量，则该脚本标签的innerHTML不会更改：

let foo = 5;
foo = 7;
console.log(document.currentScript.innerHTML);

）

<style data-st="st">
    body {
        background-color: blue;
    }
</style>
<script>

var style = document.querySelector('style[data-st="st"]');
var sheet = style.sheet;

sheet.cssRules[0].style.backgroundColor = 'green';
const newFullText = [...sheet.cssRules]
  .map(({ cssText }) => cssText)
  .join('\n');
style.innerHTML = newFullText;
console.log(style.innerHTML);

</script>

请注意，您必须使用sheet.cssRules来获取规则集合； sheet.cssRule将得出undefined。

因为要检索 text 并将其插入样式标签的内部，而不是HTML标记，所以使用textContent而不是innerHTML可能更合适：

<style data-st="st">
    body {
        background-color: blue;
    }
</style>
<script>

var style = document.querySelector('style[data-st="st"]');
var sheet = style.sheet;

sheet.cssRules[0].style.backgroundColor = 'green';
const newFullText = [...sheet.cssRules]
  .map(({ cssText }) => cssText)
  .join('\n');
style.textContent = newFullText;
console.log(style.textContent);

</script>

如何使用cssRule更改全局样式元素的innerHTML？

1 个答案: