JavaScript:改变 HTML 样式

时间:2021-10-14 14:49:33
在使用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所以留着这个疑问,留待解决!