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传递进来比较好,你说呢?