样式的操作-访问外部定义的css样式

时间:2023-12-27 18:30:55

JS对css的控制力非常强,甚至可以控制外部定义的css样式

————————————————————————

<style>
            .myclass{
                color:blue;
            }
</style>
<script type="text/javascript">
            //按钮的click事件监听函数
            function showStyle(){
                //通过js得到文本所使用的样式表,
                //因为只有一个,所以这里只需要访问第一个样式表
                var rs = document.styleSheets[0].cssRules;
                if(!rs)//有的浏览器不支持cssRules,需要用rules来得到
                    document.styleSheets[0].rules;
                //访问第一条规则的颜色样式,样式存在多个
                alert(rs[0].style.color);
            }
</script>

————————————————————————

<body style="text-align:center">    
        <span id="mytxt" class="myclass">测试文本</span>
        <br/>
        <input type="button" onclick="showStyle();" value="查看文本的颜色"/>
    </body>

————————————————————————