<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例篇</title> <style type="text/css"> #box{width: 100px;height: 100px;background:red;margin: 50px 80px;} </style> </head> <body> <!-- 用按钮控制div的高度、宽度、颜色、重置、隐藏、显示 --> <div id="box"></div> <input type="button" value="变高" onclick="a()"> <input type="button" value="变宽" onclick="b()"> <input type="button" value="变色" onclick="c()"> <input type="button" value="重置" onclick="d()"> <input type="button" value="隐藏" onclick="e()"> <input type="button" value="显示" onclick="f()"> <script type="text/javascript"> var box window.onload=function(){ box=document.getElementById('box') } function a(){ box.style.height="300px" //改变高度 } function b(){ box.style.width="300px" //改变宽度 } function c(){ box.style.background="pink" //变色 } function d(){ box.style.height="100px" box.style.width="100px" box.style.background="red" //重置 } function e(){ box.style.display="none" //隐藏 } function f(){ box.style.display="block" //显示 } </script> </body> </html>
今天学习的这节不难,内容之前都接触过,主要是把之前的一些东西融会贯通即可。