js控制div
<!DOCTYPE html>
<style>
#x{
width: 100px;
height: 100px;
background-color:red;
}
</style>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="x">
</div>
<button onclick="a()">变高</button>
<button onclick="b()">变宽</button>
<button onclick="c()">变色</button>
<button onclick="d()">重置</button>
<button onclick="e()">隐藏</button>
<button onclick="f()">显示</button>
</body>
</html>
<script type="text/javascript">
var x = document.getElementById('x');
function a(){
x.style.height = "200px";
}
function b(){
x.style.width = "200px";
}
function c(){
x.style.backgroundColor = "pink";
}
function d(){
x.style.height = "100px";
x.style.width = "100px";
x.style.backgroundColor = "red";
}
function e(){
x.style.visibility = "hidden";
}
function f(){
x.style.visibility = "visible";
}
</script>