<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box1{height:200px;width:200px;background:#f99;}
.box2{height:200px;width:200px;background:#f99;display:block;}
.box3{height:200px;width:200px;background:#f99;}
</style>
</head>
<body>
<div class="box1">1</div>
<input type="button" class="btn1" value="点击1">
<div class="box2">2</div>
<input type="button" class="btn2" value="点击2">
<div class="box3">3</div>
<input type="button" class="btn3" value="点击3">
</body>
<script>
// 1、hidden
var box1 = document.querySelector(".box1");
var btn1 = document.querySelector(".btn1");
var type = 0;
var type1 = 0;
btn1.onclick = function(){
if(type1 == 0){
box1.hidden = true;
// 注意，设置hidden时不能给div加display:block属性
// （在部分老版本浏览器中可行）
type1 = 1;
}else{
box1.hidden = false;
type1 = 0;
}
}
// 2、display
var box2 = document.querySelector(".box2");
var btn2 = document.querySelector(".btn2");
btn2.onclick = function(){
if(type == 0){
box2.style.display = "none";
type = 1;
}else{
box2.style.display = "block";
type = 0;
}
}
// 3、opacity
var box3 = document.querySelector(".box3");
var btn3 = document.querySelector(".btn3");
btn3.onclick = function(){
if(type == 0){
box3.style.opacity = 0;
type = 1;
}else{
box3.style.opacity = 1;
type = 0;
}
}
</script>
</html>
网友评论