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編程挑戰