JS控制CSS样式的方法

群里的兄弟问的效果

网上搜到的不错的控制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样式的方法

您可能感兴趣的文章: