JS控制CSS样式的方法

更新时间：2007年10月10日 15:11:57 作者：

群里的兄弟问的效果

网上搜到的不错的控制css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS控制样式</title> <style type="text/css"> /*这个不要去啊。。*/ * {     font-size:12px; } </style> <script type="text/javascript"> (function () {     if (window.CSSStyleSheet) {         var wc = window.CSSStyleSheet.prototype;         wc.addRule = function (a, b) {             var wc = this;             wc.insertRule(a + "{" + b + "}", wc.cssRules.length);         };         wc.removeRule = function (a) {             var wc = this;             wc.deleteRule(a);         };         wc.__defineGetter__("rules", new Function("return this.cssRules"));     } })(); var addRule = function (a, b) {     var wc = document.styleSheets[0], i;     for (i = 0 ; i < wc.rules.length ; i ++) if (wc.rules[i].selectorText == a) wc.removeRule(i);     wc.addRule(a, b); }; var add = function () {     var wc = document.getElementById("wc").value;     if (/([^\{]+)\s*(\{[^}]+\})/.test(wc)) {         addRule(RegExp.$1, RegExp.$2);     } else {         alert("样式错误");     } }; </script> <span class="font">我是字</span><hr /> <button onclick="add()">控制</button> <textarea style="width:500px;height:500px;" id="wc"> .font {     font-size:18px;     font-weight:bold;     line-height:20px;     color:#FF0000; } </textarea> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS控制CSS样式的方法

CSS(js)限制页面显示的文本字符长度
限制页面显示的字符长度，一直被众多网友倾睬，本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
2012-12-12
JavaScript代码调试方法实例小结
这篇文章主要介绍了JavaScript代码调试方法,结合实例形式总结分析了JavaScript错误信息的处理与代码调试相关操作技巧,需要的朋友可以参考下
2019-01-01
完美解决IE9浏览器出现的对象未定义问题
下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-09-09
小程序安全指南之如何禁止外部直接跳转到小程序某页面
由于小程序跳转的对象比较多,各自的规则又不一样,因此小程序跳转外部链接是用户咨询较多的问题之一,下面这篇文章主要给大家介绍了关于小程序安全指南之如何禁止外部直接跳转到小程序某页面的相关资料,需要的朋友可以参考下
2022-09-09
表单元素事件 (Form Element Events)
表单元素事件 (Form Element Events)仅在表单元素中有效。
2009-07-07
JS实现canvas简单小画板功能
这篇文章主要为大家详细介绍了JS实现canvas简单小画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
javascript中Object使用详解
这篇文章主要介绍了javascript中Object使用详解，非常全面详尽，有需要的小伙伴参考下
2015-01-01
javascript 广告移动特效的实现代码
下面小编就为大家带来一篇javascript 广告移动特效的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
js实现精确到秒的日期选择器完整实例
这篇文章主要介绍了js实现精确到秒的日期选择器,以完整实例形式分析了JavaScript日期选择器的实现步骤与相关技巧,涉及JavaScript针对时间与日期的相关运算,需要的朋友可以参考下
2016-04-04
JS 在数组指定位置插入/删除数据的方法
下面小编就为大家带来一篇JS 在数组指定位置插入/删除数据的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01