className 屬性設置或返回元素的class 屬性。
**語法：**
~~~
object.className = classname
~~~
**作用:**
1.獲取元素的class 屬性
2\. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
**看看下面代碼，獲得 元素的 class 屬性和改變className：**
[](http://img.mukewang.com/52e4e28c0001c97f07980838.jpg)
**結果:**
**[](http://img.mukewang.com/52e4e711000135d903810270.jpg)**
### 任務
**我們通過className屬性來設置元素的樣式:**
1.在右邊編輯第33行補充代碼，給id="p1"元素通過className添加"類名為one"的樣式。當點擊"添加樣式"按鈕，第一段文字添加樣式。
2.在右邊編輯第37行補充代碼，給id="p2"元素通過className修改為"類名為two"的樣式。當點擊"更改外觀"按鈕，第二段文字更改樣式。
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;//盒模型邊框
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態效果
并實現與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
</html>
```
- 1-7JavaScript-什么是變量
- 1-9JavaScript-什么是函數
- 2-2JavaScript-警告（alert 消息對話框）
- 2-3JavaScript-確認（confirm 消息對話框）
- 24JavaScript-提問（prompt 消息對話框）
- 2-5JavaScript-打開新窗口（window.open）
- 2-6JavaScript-關閉窗口（window.close）
- 2-7編程練習
- 3-1認識DOM
- 3-2通過ID獲取元素
- 3-3innerHTML 屬性
- 3-4改變 HTML 樣式
- 3-5顯示和隱藏（display屬性）
- 3-6控制類名（className 屬性）
- 4-1編程挑戰