js实现开关灯案例
程序员文章站
2024-03-20 20:22:28
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background:lemonchiffon;
}
#main{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
button{
width: 100%;
height: 50px;
line-height: 50px;
display: block;
background: lightpink;
}
img{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main">
<button id="btn">隐藏</button>
<img id="img" src="../所有案例/download.jpg" alt="">
</div>
</body>
</html
><script>
var btn=document.getElementById("btn");
var img=document.getElementById("img");
btn.onclick=function(){
if(btn.innerText=="隐藏"){
btn.innerText="显示";
img.style.display="none";
}
else{
btn.innerText="隐藏";
img.style.display="block";
}
}
</script>上一篇： 冒泡排序的简单Demo
下一篇： Singleton Pattern