关闭

JS控制CSS

1876人阅读 评论(0) 收藏 举报

<!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 onclick="hidden('.entry', 'block')">显示</button> <button onclick="hidden('.entry', 'none')">隐藏</button> <br /> <br /> <span class="entry">我是字</span><hr class="entry" /> <div style="background:#000000;" class="entry">&nbsp;</div> <textarea class="entry" style="width:100px;height:20px;"> </textarea> </body> </html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:94623次
    • 积分:1505
    • 等级:
    • 排名:千里之外
    • 原创:51篇
    • 转载:12篇
    • 译文:1篇
    • 评论:40条
    文章分类
    最新评论