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(样式)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript的DOM对象

DOM

DOM

JavaScript HTML DOM——改变HTML

JavaScript要点 HTML DOM - 改变 HTML

JavaScript DOM对象