javascript控制div样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var box
window.onload = function(){
box = document.getElementById("box")
}
function aa() {
box.style.height="400px";
}
function bb() {
box.style.width="500px";
}
function cc() {
box.style.background="red";
}
function dd() {
box.style.height="300px";
box.style.width="300px";
box.style.background="#ccc";
}
function ee() {
box.style.display="none" }
function ff() {
box.style.display="block" }
</script>
<style type="text/css">
#box{ width:300px; height:300px; background-color:#ccc; margin:20px;}
</style>
</head>
<body>
<p>js学习</p>
<div id = "box">
</div>
<input type="button" value ="变高" onclick="aa(this)"/>
<input type="button" value ="变宽" onclick="bb(this)"/>
<input type="button" value ="变色" onclick="cc(this)"/>
<input type="button" value ="重置" onclick="dd(this)"/>
<input type="button" value ="隐藏" onclick="ee(this)"/>
<input type="button" value ="显示" onclick="ff(this)" />
</body>
</html>