摘要:<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>控制DIV
<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>控制DIV</title> <style media="screen"> div{width:50px;height:50px;background:red;} </style> </head> <body> <div id="div"></div> <input type="button" value="變高" onclick="aa()"> <input type="button" value="變寬" onclick="bb()"> <input type="button" value="變色" onclick="cc()"> <input type="button" value="重置" onclick="dd()"> <input type="button" value="隱藏" onclick="ee()"> <input type="button" value="顯示" onclick="ff()"> </body> <script type="text/javascript"> var box; window.onload=function(){ box=document.getElementById('div'); } function aa(){ box.style.height="400px"; } function bb(){ box.style.width="400px"; } function cc(){ box.style.background="pink"; } function dd(){ box.style.width="50px"; box.style.height="50px"; box.style.background="red"; } function ee(){ box.style.display="none"; } function ff(){ box.style.display="block"; } </script> </html>
批改老師:韋小寶批改時間:2019-03-13 09:14:40
老師總結:寫的很不錯 使用JavaScript來控制div的樣式可以做成動畫一樣的效果 使用起來時還是很有體驗感的