用JS中document.styleSheets控制cssRules规则

    学习《javascript高级程序设计》的时候知道了一个小小的知识点……以前用JS控制写在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 || window.CSSRule.STYLE_RULE;
        var theEl=$("div1");
        ocssRules[0].style.background="yellow";
        alert(ocssRules[0].style.background);
    }
    

</script>
</head>

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

你可能感兴趣的:(JavaScript,html,String,IE,div)