JavaScript中的CSS样式编程------访问样式表

最新推荐文章于 2024-08-03 08:45:00 发布

昆山人在上海

最新推荐文章于 2024-08-03 08:45:00 发布

阅读量737

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax技术文章标签： css javascript 编程 div class button

本文链接：https://blog.youkuaiyun.com/kunshan_shenbin/article/details/5677532

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

使用style对象可以方便的获取某个有style特性的元素的css样式。但是他无法表示由css规则或者在style特性外部定义的类定义的元素的css样式。例如在<style />元素中或者在外部的样式表中定义的css样式。

例子如下：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function getBackgroundColor() { var oDiv = document.getElementById("div1"); alert(oDiv.style.backgroundColor); } </script> </head> <body> <div id="div1" class="special"></div> <input type="button" value="Get Background Color" onclick="getBackgroundColor()" /> <p>The alert displays nothing because the background color of the <code>div</code> is assigned by a class, not by the <code>style</code> attribute.</p> </body> </html>

解决的办法是，DOM标准下访问cssRules集合，IE下访问rules集合。例如：

动态修改样式的方法如下：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function changeBackgroundColor() { var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules; oCSSRules[0].style.backgroundColor = "blue"; } </script> </head> <body> <div id="div1" class="special"></div> <div id="div2" class="special"></div> <div id="div3" class="special"></div> <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" /> </body> </html>

但是动态改变规则中的css是有风险的，因为他会把所有符合规则的元素都一次性改变了（从上面的例子中也能反映出来）。

如果只需要改变其中的某一个元素的属性的话还得通过修改style方法来实现，代码如下：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function changeBackgroundColor() { var oDiv = document.getElementById("div1"); oDiv.style.backgroundColor = "blue"; } </script> </head> <body> <div id="div1" class="special"></div> <div id="div2" class="special"></div> <div id="div3" class="special"></div> <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" /> </body> </html>

以下代码只能在兼容DOM的浏览器中运行：

<html> <head> <title>Accessing Style Sheets Example</title> <style type="text/css"> div.special { background-color: red; height: 10px; width: 10px; margin: 10px; } </style> <script type="text/javascript"> function changeBackgroundColor() { var oDiv = document.getElementById("div1"); oDiv.style.backgroundColor = "blue"; alert(oDiv.style.item(0)); } </script> </head> <body> <div id="div1" class="special"></div> <div id="div2" class="special"></div> <div id="div3" class="special"></div> <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" /> <p><strong>Note:</strong> This example uses DOM style methods which are not supported by Internet Explorer. Therefore, an error will occur when attempting to run this example in IE.</p> </body> </html>