js控制div样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js</title>
<style>
.bigbox2{width: 800px;height:600px;border:1px solid pink;border-radius: 20px;margin: 100px auto;}
#box{width: 100px;height:100px;border-radius: 10px;background-color: pink;margin: 100px auto;}
input{margin: 100px 30px;box-shadow: 2px 2px 5px #c3c3c3;}
</style>
<script type="text/javascript">
var boxt;
function bigwidth(c) {
boxt =document.getElementById("box");
boxt.style.width="200px";
}
function bigheight(c) {
boxt =document.getElementById("box");
boxt.style.height="200px";
}
function bg(c) {
boxt =document.getElementById("box");
boxt.style.backgroundColor = "#38f0ce";
}
function ds(c) {
boxt =document.getElementById("box");
boxt.style.display="none";
}
function ds2(c) {
boxt =document.getElementById("box");
boxt.style.display="block";
}
function dss2(c) {
boxt =document.getElementById("box");
boxt.style.width="100px";
boxt.style.height="100px";
boxt.style.backgroundColor = "pink";
boxt.style.display="block";
}
</script>
</head> <body> <div class="bigbox2">
<div id="box"></div>
<input type="checkbox" name="bt[]" value="加宽" onclick="bigwidth(this)">加宽
<input type="checkbox" name="bt[]" value="加高" onclick="bigheight(this)">加高
<input type="checkbox" name="bt[]" value="换色" onclick="bg(this)">换色
<input type="checkbox" name="bt[]" value="消失" onclick="ds(this)">消失
<input type="checkbox" name="bt[]" value="显示" onclick="ds2(this)">显示
<input type="checkbox" name="bt[]" value="重置" onclick="dss2(this)">重置
</div>
</body>
</html>