今天学习《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;}
#div1</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
