js实现DIV的一些简单控制_javascript技巧

<script> <BR>var d1, d2, d3, w, h; <BR>window.onload = function() { <BR>d1 = document.getElementById('d1'); <BR>d2 = document.getElementById('d2'); <BR>d3 = document.getElementById('d3'); <BR>back(); <BR>w = window.innerWidth; <BR>h = window.innerHeight; <BR>resizeCheck(); <BR>} <BR>function resizeCheck() { <BR>if (w != window.innerWidth || h != window.innerHeight) { <BR>location.replace(location.href); <BR>return; <BR>} <BR>setTimeout("resizeCheck()", 1000); <BR>} <BR>function back() { <BR>divMoveTo(d1,200,50); <BR>divMoveTo(d2,250,75); <BR>divMoveTo(d3,75,75); <BR>divZIndex(d1,1); <BR>divZIndex(d2,2); <BR>divZIndex(d3,3); <BR>divBgColor(d1,'#555'); <BR>divBgColor(d2,'#777'); <BR>divBgColor(d3,'#999'); <BR>divTxtColor(d1,'#fff'); <BR>divTxtColor(d2,'#fff'); <BR>divTxtColor(d3,'#fff'); <BR>divShow(d1); <BR>divShow(d2); <BR>divShow(d3); <BR>} <BR>function color() { <BR>divBgColor(d1,'#f02d2d'); <BR>divBgColor(d2,'#f040d1'); <BR>divBgColor(d3,'#55afe0'); <BR>divTxtColor(d1,'#fff'); <BR>divTxtColor(d2,'#fff'); <BR>divTxtColor(d3,'#fff'); <BR>} <BR>function divMoveTo(d, x, y) { <BR>d.style.pixelLeft = x; <BR>d.style.pixelTop = y; <BR>} <BR>function divMoveBy(d, dx, dy) { <BR>d.style.pixelLeft += dx; <BR>d.style.pixelTop += dy; <BR>} <BR>function divShow(d) { <BR>d.style.visibility = 'visible'; <BR>} <BR>function divHide(d) { <BR>d.style.visibility = 'hidden'; <BR>} <BR>function divSizeTo(d, w, h) { <BR>d.style.pixelWidth = w; <BR>d.style.pixelHeight = h; <BR>} <BR>function divSizeBy(d, dw, dh) { <BR>d.style.pixelWidth += dw; <BR>d.style.pixelHeight += dh; <BR>} <BR>function divZIndex(d, z) { <BR>d.style.zIndex = z; <BR>} <BR>function divBgColor(d, c) { <BR>d.style.background = c; <BR>} <BR>function divTxtColor(d, c) { <BR>d.style.color = c; <BR>} <BR></script>

DHTML方法基础 - 对DIV的一些简单控制 BY 51js zdzhuo

d1

d2


d2包含d3

d3


d3是d2的子层