控制div样式

Original 2019-04-04 13:28:09 282
abstract:<!DOCTYPE html><html>    <head>          <title>控制div样式</title>       

<!DOCTYPE html>

<html>

    <head>

          <title>控制div样式</title>

          <meta charset="utf-8">

          <style type="text/css">

                #box{width: 100px;height: 100px;background: #ccc; }

          </style>

    </head>

<body>

  <script type="text/javascript">

            var qz

            window.onload=function(){

              qz=document.getElementById('box')

            }

            function aa(){

              qz.style.height="200px"

            }

            function bb(){

              qz.style.width="200px"

            }

            function cc(){

              qz.style.background="pink"

            }

            function dd(){

              qz.style.display ="none"

            }

            function ee(){

              qz.style.display="block"

            }

            function ff(){

              qz.style.height="100px"

              qz.style.width="100px"

              qz.style.background="#ccc"

            }

      </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>



Correcting teacher:天蓬老师Correction time:2019-04-04 14:22:59
Teacher's summary:js来动态的设置页面中的所有元素的内容,样式等, 所以js功能强大, 不可滥用

Release Notes

Popular Entries