背景：点击web页面上的隐藏按钮则关联图片隐藏，按钮变为显示，当点击显示时关联图片显示
思路：本质是，获取按钮来控制图片显示情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏</title>
</head>
<body>
<button id="btn">隐藏</button><!--双引号 单引号都是英文。不然不生效-->
<br>
<img src="C:UsersAdministratorDesktopjava scriptJS特效imagesima01.jpg" width="300px" height="300px" id="new">
<!--注意src图片地址获取方式 相对地址和绝对地址-->
<script type="text/javascript">
//1、获取事件源（获取到）
var obtn=document.getElementById("btn");//获取到隐藏按钮。获取到标签。getElementById单个元素
var odiv=document.getElementsByTagName("img")[0];//获取图片标签，etElementsByTagName获取的是集合，有点像数组
console.log(obtn);//谷歌浏览器控制台查看输出情况
console.log(typeof obtn);//谷歌浏览器控制台查看输出情况
console.log(odiv);
console.log(typeof odiv);
//2.绑定事件
obtn.onclick=function(){ //onclick使用规范。意思是：obtn使用方法onclick进行实现功能
if(obtn.innerHTML==='隐藏'){
//3、事件驱动
odiv.style.display='none';//点击隐藏按钮时，元素样式为空
obtn.innerHTML='显示';//文本变为显示,obtn同步变为显示，innerHTML增加标签的文本内容
}else{
odiv.style.display='block';
obtn.innerHTML='隐藏';
}
}
</script>
</body>
</html>