控制div的样式

Original 2019-02-16 23:46:10 261
abstract:<!DOCTYPE html><html><head>         <meta charset="utf-8">         <title>完成自己想做的事</title>   

<!DOCTYPE html>

<html>

<head>

         <meta charset="utf-8">

         <title>完成自己想做的事</title>

         <style type="text/css">

               #box{width: 200px;height: 200px;background: skyblue;margin:                          40px  100px;}

</style>

</head>

<body>

<script type="text/javascript">

       var box

       window.onload=function (){

            box=document.getElementById('box')

            }

         function aa() {

            box.style.height="600px"

            }

         function bb() {

             box.style.width="600px"

              }

          function cc() {

              box.style.background="black"

               }

           function dd() {

               box.style.height="200px"

               box.style.width="200px"

               box.style.background="pink"

            function ee() {

               box.style.display="none"

                }

            function ff() {

                box.style.display="block"

                }

</script>

<div id="box"></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>

</html>


对于第一步,先去把box给整合后,这样很方便。就算继续添加其他按钮,也让页面中的代码量没有看起来那么庞大。

Correcting teacher:西门大官人Correction time:2019-02-17 09:55:39
Teacher's summary:作业写的很好,思路也很好。以后写js代码的时候最好加一下分号

Release Notes

Popular Entries