点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文
字变为隐藏。
二、案例分析
1、事件源：按钮（button）
2、事件类型：点击（onclick）
3、事件处理程序：
（1）文字内容改变用：innerText
（2）图片是否显示用：display
三、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏图片</title>
<style>
#new {
width: 200px
margin-top: 10px
}
</style>
</head>
<body>
<button id="btn">隐藏</button><br>
<img src="images/img01.jpg" id="new">
<script>
// 1. 获取元素
var btn = document.querySelector('#btn')
var img = document.querySelector('#new')
var index = 1
// 2. 添加事件
btn.onclick = function() {
//法一：
if (index++ % 2 === 1) {
img.style.display = 'none'
this.innerText = '显示'
} else {
img.style.display = 'block'
this.innerText = '隐藏'
}
// 法二
// if (this.innerText === '隐藏') {
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test_f(){
if(img1.style.display == "block"){
img1.style.display = "none"
button1.value = "显示"
}else{
img1.style.display = "block"
button1.value = "隐藏"
}
}
//-->
</SCRIPT></HEAD>
<BODY>
<IMG id="img1" SRC="1035634757.jpg" style="display:none" WIDTH="250" HEIGHT="361" BORDER=0>
<INPUT id="button1" TYPE="button" value="显示" onclick="test_f()">
</BODY>
</HTML>
<script type="text/javascript">function change(){
obj = document.getElementById("graph")
aa = document.getElementById("ww")
if(obj.style.display !="none"){
obj.style.display="none"
aa.innerHTML ="JS显示图片"
}else{
aa.innerHTML ="不显示"
obj.style.display="block"
}
}
</script>
<table>
<tr>
<td align="right"><a href="javascript:" onclick="change()"><div id="ww">JS显示图片</div></a></td>
</tr>
<tr><td><div id="graph" style="display:none"><img src="b0.gif"></td></div></tr>
</table>
