网页中经常会看到显示和隐藏的效果，可通过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编程挑战