網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。
**語法：**
~~~
Object.style.display = value
~~~
**注意:**Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
**value取****值:**
**[](http://img.mukewang.com/52e4dba5000179da04110095.jpg)**
**看看下面代碼:**
**[](http://img.mukewang.com/52e4dcf50001bead09310689.jpg)**
### 任務
**我們來實現id="con"的p標簽元素的隱藏和顯示:**
1\. 在右邊編輯第10行補充代碼，通過**style.**display****實現隱藏。
2\. 在右邊編輯第15行補充代碼，通過**style.**display****實現顯示。
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做為一個Web開發師來說，如果你想提供漂亮的網頁、
令用戶滿意的上網體驗，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隱藏內容" />
<input type="button" onclick="showtext()" value="顯示內容" />
</form>
</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編程挑戰