84天JavaScript js特效学习 隐藏
背景：点击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>
版权声明：本文为jianchixuexu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。