js对div的控制（比较有意思）

来源：互联网发布：用友软件固定资产模块编辑：程序博客网时间：2024/06/06 01:38

<html>
   <head>
       <style type="text/css">
           #d1 {
           position: absolute;
           width: 300px;
           height: 300px;
           visibility: hidden;
           color: #fff;
           background: #555;
           }
           #d2 {
           position: absolute;
           width: 300px;
           height: 300px;
           visibility: hidden;
           color: #fff;
           background: #777;
           }
           #d3 {
           position: absolute;
           width: 150px;
           height: 150px;
           visibility: hidden;
           color: #fff;
           background: #999;
           }
       </style>
       <script>
           var d1, d2, d3, w, h;
           window.onload = function()
           {
               d1 = document.getElementById('d1');
               d2 = document.getElementById('d2');
               d3 = document.getElementById('d3');
               back();
               w = window.innerWidth;
               h = window.innerHeight;
               resizeCheck();
           }
           function resizeCheck()
           {
               if (w != window.innerWidth || h != window.innerHeight) {
               location.replace(location.href);
               return;
               }
               setTimeout("resizeCheck()", 1000);
           }
           function back()
           {
               divMoveTo(d1,200,50);
               divMoveTo(d2,250,75);
               divMoveTo(d3,75,75);
               divZIndex(d1,1);
               divZIndex(d2,2);
               divZIndex(d3,3);
               divBgColor(d1,'#555');
               divBgColor(d2,'#777');
               divBgColor(d3,'#999');
               divTxtColor(d1,'#fff');
               divTxtColor(d2,'#fff');
               divTxtColor(d3,'#fff');
               divShow(d1);
               divShow(d2);
               divShow(d3);
           }
           function color()
           {
               divBgColor(d1,'#f02d2d');
               divBgColor(d2,'#f040d1');
               divBgColor(d3,'#55afe0');
               divTxtColor(d1,'#fff');
               divTxtColor(d2,'#fff');
               divTxtColor(d3,'#fff');
           }
           function divMoveTo(d, x, y)
           {
               d.style.pixelLeft = x;
               d.style.pixelTop = y;
           }
           function divMoveBy(d, dx, dy)
           {
               d.style.pixelLeft += dx;
               d.style.pixelTop += dy;
           }
           function divShow(d)
           {
               d.style.visibility = 'visible';
           }
           function divHide(d)
           {
               d.style.visibility = 'hidden';
           }
           function divSizeTo(d, w, h)
           {
               d.style.pixelWidth = w;
               d.style.pixelHeight = h;
           }
           function divSizeBy(d, dw, dh)
           {
               d.style.pixelWidth += dw;
               d.style.pixelHeight += dh;
           }
           function divZIndex(d, z)
           {
               d.style.zIndex = z;
           }
           function divBgColor(d, c)
           {
               d.style.background = c;
           }
           function divTxtColor(d, c)
           {
               d.style.color = c;
           }
       </script>
   </head>
   <body id="bodyId">
       <form name="form1">
       <h3>DHTML方法基础 - 对DIV的一些简单控制 </h3>
       <p>
       <input type="button" value="移动d2" onclick="divMoveBy(d2,10,10)"><br>
       <input type="button" value="移动d3到d2(0,0)" onclick="divMoveTo(d3,0,0)"><br>
       <input type="button" value="移动d3到d2(75,75)" onclick="divMoveTo(d3,75,75)"><br>
       </p>
       <p>
       <input type="button" value="放大d1" onclick="divSizeBy(d1,15,15)"><br>
       <input type="button" value="缩小d1" onclick="divSizeBy(d1,-15,-15)"><br>
       </p>
       <p>
       <input type="button" value="隐藏d2" onclick="divHide(d2)"><br>
       <input type="button" value="显示d2" onclick="divShow(d2)"><br>
       </p>
       <p>
       <input type="button" value="优先显示d1" onclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
       <input type="button" value="优先显示d2" onclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
       </p>
       <p>
       <input type="button" value="填充颜色" onclick="color()"><br>
       </p>
       <p>
       <input type="button" value="返回默认状态" onclick="back()"><br>
       </p>
       </form>
   <div id="d1">
       <b>d1</b>
   </div>
   <div id="d2">
       <b>d2</b><br><br>
       d2包含d3
       <div id="d3">
           <b>d3</b><br><br>
           d3是d2的子层
       </div>
   </div>
   </body>
</html>