JavaScript中的CSS样式编程示例

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #编程 #css #div #methods #internet

本文提供了多个使用JavaScript获取HTML元素样式的示例代码，包括直接读取背景颜色、使用DOM方法进行更复杂的样式操作等。这些示例展示了不同浏览器的支持情况，并强调了IE浏览器对于某些DOM方法的支持限制。

代码如下：

先来一个大多数浏览器都支持的：

<html> <head> <title>Style Example</title> <script type="text/javascript"> function sayStyle() { var oDiv = document.getElementById("div1"); alert(oDiv.style.backgroundColor); } </script> </head> <body> <div id="div1" style="background-color: red; height: 50px; width: 50px"></div><br /> <input type="button" value="Get Background Color" onclick="sayStyle()" /> </body> </html>

再来一段：

<html> <head> <title>Style Example</title> </head> <body> <p>Move your mouse over the square.</p> <div id="div1" style="background-color: red; height: 50px; width: 50px" onmouseover="this.style.backgroundColor = 'blue'" onmouseout="this.style.backgroundColor = 'red'"></div> </body> </html>

这个应该也都支持：

<html> <head> <title>Style Example</title> </head> <body> <p>Click on the square.</p> <div id="div1" style="background-color: red; height: 50px; width: 50px" onclick="alert(this.style.cssText)"></div> </body> </html>

以下代码只能在支持DOM的浏览器上运行(IE不支持)

<html> <head> <title>Style Example</title> <script type="text/javascript"> function useMethods() { var oDiv = document.getElementById("div1"); alert(oDiv.style.item(0)); //outputs "background-color" alert(oDiv.style.getPropertyValue("background-color")); oDiv.style.removeProperty("background-color"); } </script> </head> <body> <div id="div1" style="background-color: red; height: 50px; width: 50px"></div><br /> <input type="button" value="Use Methods" onclick="useMethods()" /> <p><strong>Note: </strong> Internet Explorer does not support DOM style methods so this example will fail.</p> </body> </html>

再来一段：

<html> <head> <title>Style Example</title> <script type="text/javascript"> function sayStyle() { var oDiv = document.getElementById("div1"); alert(oDiv.style.getPropertyValue("background-color")); } </script> </head> <body> <div id="div1" style="background-color: red; height: 50px; width: 50px"></div><br /> <input type="button" value="Get Background Color" onclick="sayStyle()" /> <p><strong>Note: </strong> Internet Explorer does not support the DOM style methods so this example will fail.</p> </body> </html>

再看这个：

<html> <head> <title>Style Example</title> </head> <body> <div id="div1" style="background-color: red; height: 50px; width: 50px" onmouseover="this.style.setProperty('background-color', 'blue', '')" onmouseout="this.style.setProperty('background-color', 'red', '')"></div> <p><strong>Note: </strong> Internet Explorer does not support the DOM style methods so this example will fail.</p> </body> </html>