javascript - How to implement JS to dynamically modify css global styles

Question

If you want to dynamically modify the css global style in the page, for example, change the color of all fonts on the page to red
This can be achieved through css

*{color:red;}

And if you use js to modify the styles of all elements on the page, that is, click the button through js to dynamically modify the styles of all elements on the page to red, how should you implement it

Answer 1

I can only think of this method.

Array.prototype.slice.call(document.all).forEach(function (ele) {
    ele.style.color = 'red';
});

Answer 2

Use css style-related interfaces stylesheet.insertRule或者stylesheet.addRule Both of these can dynamically insert css styles. The compatibility is good with ie9+

For example

    // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
    myStyle.insertRule("#blanc { color: white }", 0);

When you need to delete, there are deleteRule和removeRuletwo methods. You can check the relevant information

Answer 3

[].forEach.call(document.querySelectorAll('*'),function(a){
a.style.color = 'red';
})