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

Aacher
  • 36

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

*{color:red;}

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

回复
阅读 7.2k
4 个回答

我只能想到这个方法。

Array.prototype.slice.call(document.all).forEach(function (ele) {
    ele.style.color = 'red';
});
前端记录
  • 533

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

比如

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

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

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

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

宣传栏