JS 设置 DIV 的位置

var p = documentgetElementById("div1");

pstyleposition = "absolute";

pstyleleft="100px";

pstyletop="100px";

Js代码

 获取div的坐标

 @param divObj

 @returns {{width: number, height: number, left: , top: Window}}

/

comwhuanghsjdivCoordinate=function(divObj){

if(typeof divObj == 'string'){

divObj=comwhuanghsj$$id('divObj');

}

return {'width':divObjoffsetWidth,'height':divObjoffsetHeight,

'x':divObjoffsetLeft,'y':divObjoffsetTop,

'scrollLeft':comwhuanghsjgetScroll()left,'scrollTop':comwhuanghsjgetScroll()top};

}

// Cross browser gets the position of scroll

comwhuanghsjgetScroll=function(){

return {

top:documentdocumentElementscrollTop || documentbodyscrollTop,

left:documentdocumentElementscrollLeft || documentbodyscrollLeft

}

}

得到指定DIY坐标的方法有两种，各有利弊，第一种方法得到的left是正确的，但是得到的top是基于浏览器可见区域的，不包括滚动区域，一旦向下滚动，将会出现显示错误。而第二种方法，得到的y，也即top是正确的，但是x，也即left是错误的，得到的left显示相对于body的距离，一旦由于分辨率而导致浏览器和body之间还有距离的话，他显示的具体肯定是错误的，所以这里最好用两种方法综合起来用。使用第一种方法的left和第二种方法的top。

第一种：

DOM对象有一个方法是getBoundingClientRect()得到的对象有两个属性：

left 和top：

用法如下：

<div id="gf">---</div>

<script>

left=documentgetElementById("gf")getBoundingClientRect()left

top=documentgetElementById("gf")getBoundingClientRect()left

alert(left)

alert(top)

</script>

第二种：

function GetObjWHLT(obj){

var objWHLT={left:0,top:0,width:0,heigth:0};

var nLt=0,nTp=0,offsetParent = obj;

while (offsetParent!=null && offsetParent!=documentbody){

nLt+=offsetParentoffsetLeft;

nTp+=offsetParentoffsetTop;

if(jDocbrowserisMsie && jDocbrowserversion!="60"){

parseInt(offsetParentcurrentStyleborderLeftWidth)>0nLt+=parseInt(offsetParentcurrentStyleborderLeftWidth):"";

parseInt(offsetParentcurrentStyleborderTopWidth)>0nTp+=parseInt(offsetParentcurrentStyleborderTopWidth):"";

}

offsetParent=offsetParentoffsetParent;

}

objWHLTleft = nLt;

objWHLTtop = nTp;

objWHLTwidth = objoffsetWidth;

objWHLTheigth = objoffsetHeight;

return objWHLT;

}

调用：

var obj=documentgetElementById("DIV的ID");

var tempPos = GetObjWHLT(obj);

x=tempPosleft;//离左边的距离

y=tempPostop;//离上面的距离

个人做法，如有不妥，请指出探讨

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

eventclientX 相对文档的水平座标

eventclientY 相对文档的垂直座标

eventoffsetX 相对容器的水平坐标

eventoffsetY 相对容器的垂直坐标

documentdocumentElementscrollTop

有资料可以查看。。。

以上就是关于JS 设置 DIV 的位置全部的内容，包括:JS 设置 DIV 的位置、怎么动态获取div的坐标、用JS实现，将一个DIV的坐标赋给另一个DIV。先谢谢各位了！等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！