摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用javascript改变DIV实例</title> <style type="text/css"> #box{widt
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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 changeheight(){ box.style.height="200px" } function changewidth(){ box.style.width="200px" } function changecolor(){ box.style.background="green" } function reset(){ box.style.width="100px" box.style.height="100px" box.style.background="red" } function yc(){ box.style.display="none" } function xs(){ box.style.display="block" } </script> <div id="box"></div> <input type="button" value="变高" onclick="changeheight()"> <input type="button" value="变宽" onclick="changewidth()"> <input type="button" value="变色" onclick="changecolor()"> <input type="button" value="重置" onclick="reset()"> <input type="button" value="隐藏" onclick="yc()"> <input type="button" value="显示" onclick="xs()"> </body> </html> <!-- 扩展:就现在所学的知识,想实现点一次变高按钮,增加一次高度,再点一次变高按钮,再次增加高度这样的效果,好像还是不行。 -->
批改老师:灭绝师太批改时间:2018-12-29 13:16:30
老师总结:循环一下就可以,没有什么是不可以哒,就是没有啥实际意义