使用javascript灵活控制DIV的位置

最新推荐文章于 2021-08-15 21:56:16 发布

weixin_34357962

最新推荐文章于 2021-08-15 21:56:16 发布

阅读量124

点赞数

文章标签： javascript xhtml ViewUI

使DIV始终居于屏幕中间的方法
方法1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>随滚动条移动的层 - 飘逸online-http://www.ie521.com </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.51windows.net">
</HEAD>
<style>

</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
    document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
    document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
    document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
    document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>

方法2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta content="all" name="robots" />
<meta name="Author" content="huobazi@aspxboy.com ,ｻ銧ﾐﾗﾓ" />
<meta name="Copyright" content="www.AspxBoy.Com,ﾗﾔﾓﾉｰ;貶ｨ,ﾈﾎﾒ籏ｪﾔﾘ." />
<meta name="Description" content="www.AspxBoy.Com" />
<meta name="Keywords" content="www.AspxBoy.Com,ｻ;銧ﾐﾗﾓ,huobazi" />
<title> New New Document</title>

</head>

<body>
<iframe frameborder="0" src="about:blank"

style="border:0px;position:absolute;z-index:9;left:0px;top:0px;width:expression(this.offsetParent.scrollWidth);height:expression(this.offsetParent.scrollHeight);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100);"></iframe>

<div style="position:absolute;z-index:10;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);">Please Wait...<br /><img src="/_images/statusbar.gif" /></div>
</body>

</html>

方法三：
<div id="divObjection" style="display:none; z-index: 100; left: 25%; right:25%; position: absolute; text-align: center; width: 50%; height: 120px; border-right: #009900 1px solid; border-top: #009900 1px solid; border-left: #009900 1px solid; border-bottom: #009900 1px solid; background-color: #f9fff6;"></div>
关键点：left+right+width =100%

weixin_34357962

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript灵活控制DIV的位置

使DIV始终居于屏幕中间的方法方法1：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns=" http://www.w3.org/1999/xhtml"&...
复制链接

扫一扫