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

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

如何更改样式的 innerHTML 以及 cssRule？

Answer 1

HTML 标记通常意味着标记，而不是动态变化的非标记数据，因为您在动态样式表中使用它。如果您希望更改 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>