Javascript控制DIV样式

Original 2019-01-13 17:00:51 233
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript控制DIV样式</title> <style type="text/css"> #box{width:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript控制DIV样式</title>
<style type="text/css">
#box{width: 100px;
height: 100px;
background: #ccc;
margin: 30px 90px;}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="ChangeHeight()">改变高度</button>
<button onclick="ChangeWidth()">改变宽度</button>
<button onclick="ChangeColor()">改变颜色</button>
<button onclick="reset()">重置</button>
<button onclick="conceal()">隐藏</button>
<button onclick="show()">显示</button>
<script type="text/javascript">
var box;
window.onload=function(){
box=document.getElementById("box")
}
function ChangeHeight(){
box.style.height="200px"
}
function ChangeWidth(){
box.style.width="200px"
}
function ChangeColor(){
box.style.background="pink"
}
function reset(){
box.style.height="100px"
box.style.width="100px"
box.style.background="#ccc"
}
function conceal(){
box.style.display="none"
}
function show(){
box.style.display="block"
}
</script>
</body>
</html>

总结:万事皆非易事,需多多练习。

Correcting teacher:天蓬老师Correction time:2019-01-13 17:06:02
Teacher's summary:function ChangeHeight(){ box.style.height="200px" }其实这里, 用参数的方式,将box传递进来比较好,你说呢?

Release Notes

Popular Entries