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

Question

This doesn't really require much content as the code itself is self explanatory. However, just have to escape the condition of writing this context. How do I update the innerHTML of a style element by changing the cssText of the stylesheet's cssRule?

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

How do I change the innerHTML of the style along with the cssRule?

Answer 1

HTML markup is usually meant to be markup , not dynamically-changing non-markup data , as you're using it for in the dynamic stylesheet. If you want the innerHTML to change, you'll have to collect the new text of all the cssRules and explicitly reassign the innerHTML of the style element.

(similarly, if you reassign a variable inside a script tag, the innerHTML of that script tag doesn't change:

 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> 

Note that you must use sheet.cssRules to get a collection of rules; sheet.cssRule will evaluate to undefined .

Because you're retrieving and inserting text into the inside of the style tag, rather than HTML markup, it might be more appropriate to use textContent rather than 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>