<html>
<head>
<styletype="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>
vard1,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();
}
functionresizeCheck(){
if(w!=window.innerWidth||h!=window.innerHeight){
location.replace(location.href);
return;
}
setTimeout("resizeCheck()",1000);
}
functionback(){
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);
}
functioncolor(){
divBgColor(d1,'#f02d2d');
divBgColor(d2,'#f040d1');
divBgColor(d3,'#55afe0');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
}
functiondivMoveTo(d,x,y){
d.style.pixelLeft=x;
d.style.pixelTop=y;
}
functiondivMoveBy(d,dx,dy){
d.style.pixelLeft+=dx;
d.style.pixelTop+=dy;
}
functiondivShow(d){
d.style.visibility='visible';
}
functiondivHide(d){
d.style.visibility='hidden';
}
functiondivSizeTo(d,w,h){
d.style.pixelWidth=w;
d.style.pixelHeight=h;
}
functiondivSizeBy(d,dw,dh){
d.style.pixelWidth+=dw;
d.style.pixelHeight+=dh;
}
functiondivZIndex(d,z){
d.style.zIndex=z;
}
functiondivBgColor(d,c){
d.style.background=c;
}
functiondivTxtColor(d,c){
d.style.color=c;
}
</script>
</head>
<bodyid="bodyId">
<formname="form1">
<h3>DHTML方法基础-对DIV的一些简单控制BY51jszdzhuo</h3>
<p>
<inputtype="button"value="移动d2"onclick="divMoveBy(d2,10,10)"><br>
<inputtype="button"value="移动d3到d2(0,0)"onclick="divMoveTo(d3,0,0)"><br>
<inputtype="button"value="移动d3到d2(75,75)"onclick="divMoveTo(d3,75,75)"><br>
</p>
<p>
<inputtype="button"value="放大d1"onclick="divSizeBy(d1,15,15)"><br>
<inputtype="button"value="缩小d1"onclick="divSizeBy(d1,-15,-15)"><br>
</p>
<p>
<inputtype="button"value="隐藏d2"onclick="divHide(d2)"><br>
<inputtype="button"value="显示d2"onclick="divShow(d2)"><br>
</p>
<p>
<inputtype="button"value="优先显示d1"onclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
<inputtype="button"value="优先显示d2"onclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
</p>
<p>
<inputtype="button"value="填充颜色"onclick="color()"><br>
</p>
<p>
<inputtype="button"value="返回默认状态"onclick="back()"><br>
</p>
</form>
<divid="d1">
<b>d1</b>
</div>
<divid="d2">
<b>d2</b><br><br>
d2包含d3
<divid="d3">
<b>d3</b><br><br>
d3是d2的子层
</div>
</div>
</body>
</html>
【js实现DIV的一些简单控制】相关文章：