js点击实现显示和隐藏效果
1、html结构
<img src="images/xingxing.jpg" alt="" id="img"> <button id="btn_show" > 显示 </button> <button id="btn_hidden"> 隐藏 </button>
2、css样式
<style> #img{ width: 500px; height: 500px; display: block; } button{ width: 200px; height: 50px; border-radius: 10px; font-size: 20px; margin: 11px; background-color:#666666 ; color: #ffffff; } </style>
3、js
<script>
window.onload = function () {
/* window意思是窗口 onload是加载 意思是页面加载完毕后,才执行里面的js ,所以可以放在顶端*/
var img = document.getElementById("img");
/*获取图片img="id"给变量 img*/
var btn_show = document.getElementById("btn_show");
/*获取显示按钮id="btn_show"给变量 btn_show*/
var btn_hidden = document.getElementById("btn_hidden");
/*获取隐藏按钮id=“btn_show”给变量 btn_hidden */
btn_show.onclick = function () {
img.style.display = "block";
}
/*点击显示按钮时,img的样式style的display属性赋值为“block”,下同理*/
btn_hidden.onclick = function () {
img.style.display = "none";
}
}
</script>