如何实现JS动态修改css全局样式

Question

如果要在页面中动态修改css全局样式，例如将页面所有字体颜色改为红色
通过css可以这样实现

*{color:red;}

而如果通过js，利用页面中的按钮修改所有元素样式，即通过js点击按钮动态修改页面中所有元素样式字体颜色为红色，应如何实现

Answer 1

我只能想到这个方法。

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

Answer 2

用css样式相关的接口 stylesheet.insertRule或者stylesheet.addRule 这两个都可以动态插入css样式 兼容性还可以 ie9+

比如

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

需要删除的时候还有deleteRule和removeRule两个方法 可以查一下相关资料

Answer 3

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

Answer 4

创建style标签 给该style innerHtml赋值你写得样式字符串
然后appendChild到body