cssRules

     今天学习《javascript高级程序设计》的时候知道了一个小小的知识点。。发现自己原来是这么的菜呀。。。

     做一个demo的时候，发现写在html标签里用style属性的样式<h1 style="width:100px;">,可以用普通的DOM方法获得。例如theEl.style.width，但是如果是写在style标签下的样式<type="text/css">h1{width:100px;}</style>，这种方法就会输出空值。
    这个时候必须用到cssRules集合才能取得、修改该样式的值。

<! 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=utf-8"   />
< title > css rules </ title >
< style  type ="text/css" >
#div1{}{width:100%;height:400px; background:red;}
</ style >
< script >

    window.onload=init;
    function $(id){
              return "string" == typeof id ? document.getElementById(id) : id;
    }
    function init(){
        var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        var theEl=$("div1");
        ocssRules[0].style.background="yellow";
        alert(ocssRules[0].style.background);
    }
    

</ script >
</ head >

< body >
< div  id ="div1" ></ div >
</ body >
</ html >

 

注意：样式集合在IE和FF下的名称是不一样的，FF下是document.styleSheets[0].cssRules

ie下是document.styleSheets[0].rules