JavaScript HTML DOM——改变CSS（样式）
Posted zyjhandsome
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript HTML DOM——改变CSS（样式）相关的知识，希望对你有一定的参考价值。
html DOM 允许 javascript 改变 HTML 元素的样式。
1、改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
1 document.getElementById(id).style.property=new style
举例1（下面的例子会改变 <p> 元素的样式）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p id="p1">Hello, world!</p> 14 15 <script> 16 var x = document.getElementById("p1"); 17 p1.style.color = "red"; 18 </script> 19 </body> 20 </html>
输出结果：
Hello, world!
举例2（本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <h1 id="header1">Header 1!</h1> 14 <!--<button type="button" onclick="document.getElementById(‘header1‘).style.color=‘red‘">点击这里！</button>--> 15 <button type="button" onclick=‘document.getElementById("header1").style.color="red"‘>点击这里！</button> 16 <script> 17 </script> 18 </body> 19 </html>
输出结果：
Header 1!
以上是关于JavaScript HTML DOM——改变CSS（样式）的主要内容，如果未能解决你的问题，请参考以下文章