JavaScript中的CSS样式编程示例_script tpye= css-优快云博客

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

代码如下：

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

<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" οnclick="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" οnmοuseοver="this.style.backgroundColor = 'blue'" οnmοuseοut="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" οnclick="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" οnclick="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" οnclick="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" οnmοuseοver="this.style.setProperty('background-color', 'blue', '')" οnmοuseοut="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>