元素位置及宽度的计算总节

Posted 2020-11-01 申小贺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素位置及宽度的计算总节相关的知识，希望对你有一定的参考价值。

1.dom.getBoundingClientRect().left/top/right/bottom/height/width;

返回元素相对于浏览器窗口的相对位置及自身的宽高。

IE中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和height.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

这里要注意的是，bottom是元素底部相对于窗口顶部的距离，而不是像css里面position的bottom相对于窗口底部，同理，rihgt属性是元素最右边相对于窗口左边的距离。

2.dom.scrollTop/scrollLeft;

包含滚动条的元素目前滚动到的位置距离元素顶端的距离。

3.dom.scrollWidth/scrollHeight;

元素width+padding的宽度/元素height+padding的高度。这里的width/height指显示出来是宽和可滚动部分的宽。

4.dom.clientWidth/clientHeight;

元素可视区域的width+padding/元素可视区域的height+padding;不包含可滚动的部分。

5.dom.offsetWidth/offsetHeight;

元素可视区域的width+padding+border/元素可视区域的height+padding+border;不包含可滚动部分。如果有滚动条则包含滚动条的宽度。详细的可见上一篇文章。

6.dom.offsetParent;

. offsetParent定义：offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元素

. 根据定义分别存在以下几种情况

【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）

【2】元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素

【3】元素自身无fixed定位，且父元素存在定位，offsetParent为离自身最近且经过定位的父元素

【4】<body>元素的offsetParent是null

浏览器兼容性

在以WebKit为核心的浏览器上，如果元素是隐藏的（该元素或者上级元素style.display=\'none\'）或者元素自身style.position=\'fixed\'，那么就会返回null。

在IE（9）上如元素style.position=\'fixed\'，该属性就会返回null。（然而display:none不影响这个浏览器）

当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，IE7-浏览器下，offsetParent是<html>

//获取元素的纵坐标

1 function getTop(e){
2   var offset=e.offsetTop;
3   if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
4   return offset;
5 }

//获取元素的横坐标

1 function getLeft(e){
2   var offset=e.offsetLeft;
3   if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
4   return offset;
5 }

7.screenX/screenY;

鼠标相对于屏幕左上角的水平和垂直距离；

8.clientX/clientY;

鼠标相对于浏览器窗口左上角的水平和垂直距离；

9.pageX/pageY;

鼠标距离页面原点/顶端左上角的水平和垂直距离；兼容性：IE不支持（在ie中使用event.x，event.y来代替），其他高级游览器支持。

10.offsetX/offsetY;

鼠标距离该元素（鼠标所在元素）左上角的水平和垂直距离。

以上是关于元素位置及宽度的计算总节的主要内容，如果未能解决你的问题，请参考以下文章