<!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"> .entry { display:block; } </style> <script type="text/javascript"> //目前暂对styleSheets没有研究。。。这东西兼容起来貌似挺麻烦的 var Browser = { IE : /MSIE/.test(navigator.userAgent) , FF : /Firefox/.test(navigator.userAgent) , OP : !!window.opera };
!function () { if (window.CSSStyleSheet) { var wc = window.CSSStyleSheet.prototype; wc.addRule = function (a, b) { this.insertRule(a + "{" + b + "}", this.cssRules.length); }; wc.removeRule = function (a) { this.deleteRule(a); }; wc.__defineGetter__ && wc.__defineGetter__("rules", new Function("return this.cssRules")); } }();
var hidden = function (name, styleText) { var ss = document.styleSheets[0], rs = ss[Browser.OP ? 'cssRules' : 'rules'], i; for (i = 0 ; i < rs.length ; i ++) if (rs[i].selectorText.toLowerCase() == name.toLowerCase()) rs[i].style.display = styleText; }; </script> <button οnclick="hidden('.entry', 'block')">显示</button> <button οnclick="hidden('.entry', 'none')">隐藏</button> <br /> <br /> <span class="entry">我是字</span><hr class="entry" /> <div style="background:#000000;" class="entry"> </div> <textarea class="entry" style="width:100px;height:20px;"> </textarea> </body> </html>