JavaScript設定和修改CSS樣式

語法：
nodeObject.style.cssProperty=newStyle
其中，nodeObject 為節點對象，cssProperty 為CSS屬性，newStyle 為CSS屬性的值。

注意：對於由 “ - ” 分隔的CSS屬性，要去掉 “ - ” ，並將 “ - ” 後的第一個字母大寫。

例如：

document.getElementById("demo").style.height = "50px" ;
document.getElementById("demo").style.border = " 1px solid #ddd ";
document.getElementById("demo").style.backgroundColor = " #ccc ";
document.getElementById("demo").style.textAlign = " center ";

舉例，設定 id="demo"的節點的樣式：

<style>
#demo{
    height:50px;
    width:250px;
    margin-top:10px;
    text-align:center;
    line-height:50px;
    background-color:#ccc;
    }
</style>
<div id="demo">
    点击这里改变CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        this.style.height = " 70px ";
        this.style.lineHeight = " 70px ";
        this.style.backgroundColor = " #000 ";
        this.style.color=" #fff ";
    }
</script>

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 #demo{
 height:50px;
 width:250px;
 margin-top:10px;
 text-align:center;
 line-height:50px;
 background-color:#ccc;
 }
 </style>
 <div id="demo">
 点击这里改变CSS样式
 </div>
 <script type="text/javascript">
 document.getElementById("demo").onclick=function(){
 this.style.height = " 70px ";
 this.style.lineHeight = " 70px ";
 this.style.backgroundColor = " #000 ";
 this.style.color=" #fff ";
 }
 </script>
</head>
<body>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX