js和css的综合应用
<!doctype html>
<html>
<head>
<title>js改变css效果</title>
<style>
*{margin:0px;padding:0px}
#box{width:100px;height:100px;background:red;margin:40px 60px;}
</style>
</head>
<body>
<div id="box"><div>
<input type="button" value="变高">
<input type="button" value="变宽">
<input type="button" value="变色">
<input type="button" value="重置">
<input type="button" value="消失">
<input type="button" value="隐藏">
<script>
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;" //chongzhi
box.style.background="red；"
}
function ee(){
box.style.display = "none" //消失
}
function ff(){
box.style.display = "block" //显示
}
</script>
</body>
</html>