点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文
字变为隐藏。
二、案例分析
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 === '隐藏') {
比如在一个div中显示图片<div id='img'></div>
js:
var divObj = document.getElementById("img")
divObj.innerHTML = "<img src='1.jpg' />"
你这段代码放到body里边
<script>
document.write("<img src='1.jpg'/>")
</script>
1. 发起请求页面 //ImageClient.jsp
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ImageRequest</TITLE>
</HEAD>
<BODY>
<img src="http://127.0.0.1:8080/ImageServer.jsp"/>
</BODY>
</HTML>
2. 接受请求并返回结果页 //ImageServer.jsp
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ page import="java.io.*"%>
<%
System.out.print("enter...")
String filePath = "C:/Program Files/Tomcat/Tomcat-7.0.4/webapps/ROOT/ericsson.gif"
File file = new File(filePath)
InputStream fis
try {
fis = new FileInputStream(file)
byte[] buf=new byte[(int)fis.available()]
fis.read(buf)
response.setContentType("application/binarycharset=ISO8859_1")
OutputStream outs = response.getOutputStream()
outs.write(buf)
outs.flush()
out.clear()
out = pageContext.pushBody()
} catch (FileNotFoundException e) {
e.printStackTrace()
} catch (IOException e) {
e.printStackTrace()
}
%>
3. 测试结果
