84天JavaScript js特效学习 隐藏
Posted 坚持是多么伟大的事情
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了84天JavaScript js特效学习 隐藏相关的知识，希望对你有一定的参考价值。
背景：点击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>
以上是关于84天JavaScript js特效学习 隐藏的主要内容，如果未能解决你的问题，请参考以下文章