JavaScript：改变 HTML 样式 

在使用javaScript的改变Html样式的过程中，发现Html中可以使用 颜色名，颜色值，颜色RGB值设置颜色。

颜色名
1 <p id="demo" style="color:DeepPink" >
颜色值Color HEX
<p id="demo" style="color:#ff0000" >

颜色RGB值

<p id="demo" style="color:rgb(192,192,192)" >

可以用如下方式来更改颜色。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1>我的第一段 JavaScript</h1>
 6 <p id="demo11" style="color:DeepPink" >
 7 JavaScript 能改变 HTML 元素的样式。
 8 </p>
 9 <h1>我的第一段 JavaScript</h1>
10 <p id="demo111" style="color:#ff0000" >
11 JavaScript 能改变 HTML 元素的样式。
12 </p>
13 <h1>我的第一段 JavaScript</h1>
14 <p id="demo" style="color:rgb(192,192,192)" >
15 JavaScript 能改变 HTML 元素的样式。
16 </p>
17 <script>
18   function myFunction(){
19     x=document.getElementById("demo");
20     
21     if(x.style.color.match("DeepPink")){
22          x.style.color="MediumBlue";
23          console.info(x.style.color);
24     }else{
25         x.style.color="DeepPink";
26         console.info(x.style.color);
27     }
28   }
29 
30 </script>
31 <button type="button" onclick="myFunction()" >点击这里</button>
32 </body>
33 
34 </html>

上面这段程序中通过DeepPink来匹配颜色是可行的。理论上来说用其他两种形式来匹配颜色也应该可行，但是在使用Color HEX和RGB来匹配颜色的时候会无法match，因为是刚开始学javascript所以留着这个疑问，留待解决！

posted @ 2014-03-27 15:02  Alcc  阅读(1051)  评论(0)    收藏  举报