JS控制CSS样式的方法

群里的兄弟问的效果
<html> <head> <title>无标题文档</title> <style>p.p1{ background-color:#FF0000;font-size:22px;_ font-family:"方正舒体"; font-weight:100; }</style> <script language="javascript"> function remove(){ var wc = document.styleSheets[0], i; for (i = 0 ; i < wc.rules.length ; i ++) wc.removeRule(i); } </script></head> <body><p class=p2 style=" background-color:#FF0000;font-size:22px; font-family:"方正舒体"; font-weight:100;"> hello,this is a example of stylesheets</p> <form> <input type="button" value="按我取消下行背景设置" onClick="remove()"> <p class=p1> hello,this is a example of stylesheets</p> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
网上搜到的不错的控制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需刷新才能执行]