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编程挑战