javascript - 如何实现JS动态修改css全局样式
阿神
阿神 2017-05-19 10:11:38
0
3
653

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

*{color:red;}

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

阿神
阿神

闭关修行中......

全部回复(3)
阿神

我只能想到这个方法。

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

用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两个方法 可以查一下相关资料

phpcn_u1582

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板