JavaScript（十一） HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

 

A、改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

🌰

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 </head>
 7 <body>
 8  
 9 <p id="p1">Hello World!</p>
10 <p id="p2">Hello World!</p>
11 <script>
12 document.getElementById("p2").style.color="blue";
13 document.getElementById("p2").style.fontFamily="Arial";
14 document.getElementById("p2").style.fontSize="larger";
15 </script>
16 <p>以上段落通过脚本修改。</p>
17  
18 </body>
19 </html>

 

B、使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

  • 元素被点击。
  • 页面加载完成。
  • 输入框被修改。
  • ……

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1 id="id1">我的标题 1</h1>
 6 <button type="button" 
 7 onclick="document.getElementById('id1').style.color='red'">
 8 点我!</button>
 9 
10 </body>
11 </html>

 

posted @ 2016-10-13 13:35  抠得儿  阅读(144)  评论(0)    收藏  举报