javaScript元素位置

最新推荐文章于 2022-10-12 20:43:20 发布

小飞虫bin

最新推荐文章于 2022-10-12 20:43:20 发布

阅读量427

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/bin71722/article/details/51889523

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

如何取到页面中任意某个Html元素与body元素之间的偏移距离？
offsetWidth offsetHeight 取得对象的宽度和高度.

offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异：
IE5.0+ 、Opera8.0+：　offsetTop和offsetLeft 都是相对父级元素
Firefox1.06： offsetTop和offsetLeft 都是相对于body元素
因此：
（1）在FF下直接使用offsetTop和offsetLeft，就可以取到页面中任意某个Html元素与body元素之间的偏移距离；
（2）在IE、Opera下则比较麻烦：
需要首先取到该Html元素与body元素之间所有Html元素，计算各自的offsetTop和offsetLeft，然后再累加。
即：从该Html元素开始，遍历至body，在遍历的过程中，如果某个HTML元素的CSS设置了borderWidth的话，则borderWidth不是算在offsetTop和offsetLeft内的－－因此在遍历的过程中，还需要累加上：
obj.currentStyle.borderLeftWidth、obj.currentStyle.borderTopWidth
//以下遍历获取元素在body中的坐标
while (objSrc.offsetParent){
left += objSrc.offsetLeft;//source element's offsetLeft
top += objSrc.offsetTop;//source element's offsetTop
objSrc = objSrc.offsetParent;
}
如果要在javascript中通过style.left和style.top来改变元素的坐标，需要设置元素css的position属性(absolute或relative)。不然不能改变元素的坐标。

当某个元素及其父元素都未进行CSS定位时，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。（其实无论时标准兼容模式还是怪异模式，根元素都为Body元素）。

当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素。

当某个元素及其父元素进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

当只有某个元素进行了CSS定位，其父元素及其DOM结构层次上都未进行CSS定位时，则这个元素的offsetParent属性的取值为BODY。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。

1定位鼠标
<HTML>
<HEAD>
<TITLE> 定位鼠标 </TITLE>
</HEAD>
<script>
function getMousePosition()
{
var e = e||window.event;
var objSrc = e.srcElement;//event source element
var left = 0;
var top = 0;

while (objSrc.offsetParent){
left += objSrc.offsetLeft;//source element's offsetLeft
top += objSrc.offsetTop;//source element's offsetTop
objSrc = objSrc.offsetParent;
}

mouseOffsetX = left+ e.offsetX;
mouseOffsetY = top + e.offsetY;
document.getElementById("mX").value = mouseOffsetX;
document.getElementById("mY").value = mouseOffsetY;
}
document.onmousemove = getMousePosition;
</script>
<BODY>
鼠标X坐标：<input type=text id=mX size=10>
鼠标Y坐标：<input type=text id=mY size=10>
</BODY>
</HTML>
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

**********************
left是一个对象所具有的一个基本属性,如果position:relative表示左顶点到父对象的左边距的距离,但如果其属性是position:absolute时是到body的左边距。通过style.left获得和设置。

top是一个对象所具有的一个基本属性,如果position:relative表示上顶点到父对象的上边界的距离,但如果其属性是position:absolute时是到body的上边界。通过style.right获得和设置。
如果 "position" 属性的值为 "static"(position没有设置relative或absolute)，那么设置top和left属性不会产生任何效果。

offsetLeft是指的以自段坐标为基本的到父窗口的左边距,可以看出与left是一样的,但不同的就是一个是以父对象为坐标基准,一个是以自身坐标为基准的.两者的结果是一样的.
两者中是offsetLeft返回的是数值,而left则是文本,后边可能会跟上px这样的单位。
offsetTop也类似。
offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
offsetHeight 指 obj 控件自身的高度，整型，单位像素。

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
event.clientX 鼠标相对浏览器页面的水平座标
event.clientY 鼠标相对浏览器页面的垂直座标
***********************