javascript控制DIV样式
张翔2019-05-09 16:43:40224<!DOCTYPE html>
<html>
<head>
<title>javascript控制DIV样式</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background:red;
margin: 20px 80px;
}
</style>
</head>
<body>
<script type="text/javascript">
var box;
window.onload = function(){
box = document.getElementById('box');
}
function aa(){
box.style.height = '400px'; // 改变高度
}
function bb(){
box.style.width = '400px'; // 改变宽度
}
function cc(){
box.style.background = 'pink'; // 改变颜色
}
function dd(){
box.style.height = '100px';
box.style.width = '100px'; // 重置
box.style.background = 'red';
}
function ee(){ // 隐藏
box.style.display = 'none';
}
function ff(){ // 显示
box.style.display = 'block';
}
</script>
<input type="button" onclick="aa()" value="变高">
<input type="button" onclick="bb()" value="变宽">
<input type="button" onclick="cc()" value="变色">
<input type="button" onclick="dd()" value="重置">
<input type="button" onclick="ee()" value="隐藏">
<input type="button" onclick="ff()" value="显示">
<div id="box"></div>
</body>
</html>