hosteons中文网

CSS 样式具有重叠特性，因此定义的样式与最终显示的样式并非并非完全相同。DOM 定义了一个方法帮助用户快速检测当前对象的显示样式，不过 IE 和标准 DOM 之间实现的方法不同。

IE 浏览器

IE 使用 currentStyle 对象读取元素的最终显示样式，是只读对象。currentStyle 对象包含元素的 style 属性，以及浏览器预定义的默认 style 属性。

【示例1】为类样式 blue 增加一个背景色为白色的声明，然后把该类样式应用到段落文本中。

<style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue {
        color:blue;
        background-color:#FFFFFF;
    }
</style>
<script>
    window.onload = function(){
        var styleSheets = document.styleSheets[0];  //获取样式表引用
        var index = styleSheets.length;  //获取样式表中包含样式的个数
        if(styleSheets.insertRule){  //判断浏览器是否支持insertRule()方法
            //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾，
            styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
        }else{  //如果哦浏览器不支持insertRule()方法
            styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
        }
    }
</script>
<p class="blue">在样式表中增加样式操作</p>

在浏览器中预览，会发现脚本中使用 insertRule()（或 addRule()）方法添加的样式无效，效果如图所示。