摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>控制DIV</title> <style type="text/css"> #box{height: 100px;width: 100px;backgroun
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>控制DIV</title> <style type="text/css"> #box{height: 100px;width: 100px;background: skyblue;} </style> </head> <body> <div id="box" onmouseover="ff()" onmouseout="gg()" ></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()"> <script type="text/javascript"> var x=document.getElementById('box'); function aa() { x.style.height="400px" x.style.width="400px" } function bb() { x.style.background="pink" } function cc() { x.style.height="100px" x.style.width="100px" x.style.background="skyblue" } function dd() { x.style.display="none" } function ee() { x.style.display="block" } function ff() { x.style.borderRadius="50px" } function gg() { x.style.borderRadius="0px" } </script> </body> </html>
获取节点,通过事件修改DIV样式
批改老师:查无此人批改时间:2019-01-14 16:56:41
老师总结:完成的不错呀。代码缩进下,看着整齐。继续加油。