style属性

　　style加样式是加在行间，取样式也是在行间取；

　　我们来看下面这段代码：　　

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8" />

     <style>

         #div1 {

             width: 200px;

             height: 200px;

             border: 1px solid black;

             background-color: green;

         }

     </style>

     <script>

         function toRed() {

             var oDiv = document.getElementById("div1");

             oDiv.style.backgroundColor = "red";

         }

     </script>

 </head>

 <body>

     <input type="button" value="changeToRed" onclick="toRed()" />

     <div id="div1"></div>

 </body>

 </html>

　　这段代码定义了一个按钮和一个<div>元素，并在<style>元素中设置了<div>元素的背景颜色为绿色。通过点击按钮，改变<div>元素的背景颜色为红色。

　　在chrome的审查元素中，没有点击按钮前，<div>元素的行内样式是下面这个样子：

点击了按钮之后，变成了这样子：

我们可以看到，点击按钮之后，<div>元素的行内样式增加了 style = "background-color: red;"

我们把函数改为alert <div>元素的背景颜色，代码如下：

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8" />

     <style>

         #div1 {

             width: 200px;

             height: 200px;

             border: 1px solid black;

             background-color: green;

         }

     </style>

     <script>

         function alertColor() {

             var oDiv = document.getElementById("div1");

             alert(oDiv.style.backgroundColor);

         }

     </script>

 </head>

 <body>

     <input type="button" value="alertColor" onclick="alertColor()" />

     <div id="div1"></div>

 </body>

 </html>

　　代码执行后弹出一片空白，并不是我们意想中的green。这是因为background-color: green; 这条规则定义在<style>元素中，而style.backgroundColor只能获取到行内样式，但我们并没有在<div>元素中定义background-color，因此会弹出一片空白。

巴特西

style属性

最新文章

热门文章