背景：点击web页面上的隐藏按钮则关联图片隐藏，按钮变为显示，当点击显示时关联图片显示

思路：本质是，获取按钮来控制图片显示情况

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
    <title>隐藏</title>
</head>
<body>
    <button id="btn">隐藏</button><!--双引号  单引号都是英文。不然不生效-->
    <br>
    <img src="C:\Users\Administrator\Desktop\java script\JS特效\images\ima01.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>