我的JavaScript控制DIV样式案例与总结
基本思路
（1）创立一个<div></div>盒子，在div中给一id，命名为box。在JavaScript函数内部定义一个名为example的变量，并令其为全局变量。
<div id="box"></div>
var example
window.onload=function(){
example=document.getElementById("box")
}（2）在JS中定义7个函数，分别有让此<div>变长、变宽、变色、变圆、重置、隐藏、显示这7种功能，并在<input>标签中的type属性给之为botton有点击的效果。
<div id="box"></div> <input type="button" value="变长" onclick="longer()"> <input type="button" value="变宽" onclick="wider()"> <input type="button" value="变色" onclick="discoloration()"> <input type="button" value="变圆" onclick="circle()"> <input type="button" value="重置" onclick="reset()"> <input type="button" value="隐藏" onclick="hide()"> <input type="button" value="显示" onclick="display()">
function longer(){
box.style.height="400px"
}
function wider() {
box.style.width="400px"//改变宽度
}
function discoloration(){
box.style.background="#5EBEFA"
}
function circle(){
box.style.borderRadius="200px"
}
function reset(){
box.style.height="100px"
box.style.width="100px"
box.style.background="pink"
box.style.borderRadius="0px"
}
function hide(){
box.style.display="none"
}
function display(){
box.style.display="block"
}（3）在<style></style>中给box、input相应显示的样式，编写好这些代码后，在HTML页面能实现这7个功能。
*{margin: 0px;padding: 0px;}
#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
input{width: 60px;height: 40px;font-family: tahoma, arial, 'Hiragino Sans GB', 黑体, sans-serif;border: 1px solid blue;margin: 0px auto;margin-left: 175px;}完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript控制DIV样式</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
input{width: 60px;height: 40px;font-family: tahoma, arial, 'Hiragino Sans GB', 黑体, sans-serif;border: 1px solid blue;margin: 0px auto;margin-left: 175px;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变长" onclick="longer()">
<input type="button" value="变宽" onclick="wider()">
<input type="button" value="变色" onclick="discoloration()">
<input type="button" value="变圆" onclick="circle()">
<input type="button" value="重置" onclick="reset()">
<input type="button" value="隐藏" onclick="hide()">
<input type="button" value="显示" onclick="display()">
<script type="text/javascript">
var example
window.onload=function(){
example=document.getElementById("box")
}
function longer(){
box.style.height="400px"
}
function wider() {
box.style.width="400px"//改变宽度
}
function discoloration(){
box.style.background="#5EBEFA"
}
function circle(){
box.style.borderRadius="200px"
}
function reset(){
box.style.height="100px"
box.style.width="100px"
box.style.background="pink"
box.style.borderRadius="0px"
}
function hide(){
box.style.display="none"
}
function display(){
box.style.display="block"
}
</script>
</body>
</html>
