关闭

用JS中document.styleSheets控制cssRules规则

854人阅读 评论(0) 收藏 举报
分类:

    学习《JavaScript高级程序设计》的时候知道了一个小小的知识点……以前用JS控制写在html标签里用style属性的样式<h1 style="width:100px;">,可以用普通的DOM方法获得。例如theEl.style.width,但是如果是写在style标签下的样式<type="text/css">h1{width:100px;}</style>,这种方法就会输出空值。
    这个时候必须用到cssRules集合才能取得、修改该样式的值。

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>css rules</title>  
  6. <style type="text/css">  
  7. #div1{width:100%;height:400px; background:red;}  
  8. </style>  
  9. <script>  
  10.   
  11.     window.onload=init;  
  12.     function $(id){  
  13.               return "string" == typeof id ? document.getElementById(id) : id;  
  14.     }  
  15.     function init(){  
  16.         var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules || window.CSSRule.STYLE_RULE;  
  17.         var theEl=$("div1");  
  18.         ocssRules[0].style.background="yellow";  
  19.         alert(ocssRules[0].style.background);  
  20.     }  
  21.       
  22.   
  23. </script>  
  24. </head>  
  25.   
  26. <body>  
  27. <div id="div1"></div>  
  28. </body>  
  29. </html>  
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:286113次
    • 积分:3304
    • 等级:
    • 排名:第10279名
    • 原创:49篇
    • 转载:494篇
    • 译文:0篇
    • 评论:19条
    最新评论