HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
**语法:**
~~~
Object.style.property=new style;
~~~
**注意:**Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
**基本属性表（property）:**
**[](http://img.mukewang.com/52e4d4240001dd6c04850229.jpg)**
**注意:**该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
**看看下面的代码:**
改变 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
~~~
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
~~~
**结果:**
[](http://img.mukewang.com/52e4d6ae000177d203770253.jpg)
### 任务
**现在我们来改变下HTML中元素的CSS样式:**
1\. 在右边编辑器中，第12行补充代码，修改h2标签的样式，将颜色设为红色。
2\. 在右边编辑器中，第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。
3\. 在右边编辑器中，第14行补充代码，修改h2标签的样式，将宽设为300px。
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color = "blue";
mychar.style.backgroundColor = "#CCC";
mychar.style.width = "300px";
</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编程挑战