js获取元素的页面坐标

Posted 2020-08-30 金琥

一、DOM中各种宽度、高度

二、DOM中的坐标系

JS获取div元素的宽度

offsetWidth=width+padding-left+padding-right+border-left+border-right,
即offsetWidth描述的是元素的宽度，是指元素的宽度+内边距（左右两个）+边框（左右两个），不包括外边距和滚动条部分

offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,
即offsetHeight描述的是元素的高度，是指元素的高度+内边距（上下两个）+边框（上下两个），不包括外边距和滚动条部分

offsetTop=margin-top+padding-top(parent的)
即offsetTop描述的是元素和父容器的上边距离，是指元素的外边距（上边一个）+已定位的父容器（offsetParent）的内边距（上边一个）（不包括元素的边框和父容器的边框）

offsetLeft=margin-left+padding-left(parent的)
即offsetLeft描述的是元素和父容器的左边距离，是指元素的外边距（左边一个）+已定位的父容器（offsetParent）的内边距（左边一个）（不包括元素的边框和父容器的边框）

clientWidth=width+padding-left+padding-right
即clientWidth描述的是元素的宽度，是指元素的宽度+内边距（左右两个），不包括外边距、滚动条部分、边框

clientHeight=height+padding-top+padding-bottom
即clientHeight描述的是元素的高度，是指元素的高度+内边距（上下两个），不包括外边距、滚动条部分、边框

clientTop=border-top
即clientTop是指当前元素的上边框

clientLeft=border-left
即clientLeft是指当前元素的左边框

scrollWidth=width+padding-left+padding-right
即元素的滚动条宽度，是指宽度+内边距（左右两个），值等价于“clientWidth”的值

scrollHeight=height+padding-top+padding-bottom
即元素的滚动条高度，是指高度+内边距（上下两个），值等价于“clientHeight”的值

scrollTop元素的滚动条的垂直位置

scrollLeft元素的滚动条的水平位置

注：
http://www.cnblogs.com/kongxianghai/p/4192032.html
情况1：
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

 

滚动条属性：
　　overflow：auto为自动，yes为有，no为无
　　overflow-x：横向滚动条
　　overflow-y：纵向滚动条

如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

特别是元素内容超过可视区，这里的滚动条宽度有点不太清楚

 

示例：

 1 <div id="divParent" style="position:relative; background:#36F; padding:5px; border:2px solid #FF0; width:300px; overflow:auto;">
 2     <div id="divChild" style="width:400px; height:100px; border:1px solid #fff; background:#69F; margin:20px; padding:10px;
 3     "></div>
 4 </div>
 5 
 6 <script type="text/javascript">
 7     var div = document.getElementById("divChild");
 8     var childWidth = div.offsetWidth;
 9     var childHeight = div.offsetHeight;
10     var childTop = div.offsetTop;
11     var childLeft = div.offsetLeft;
12     
13     div.innerHTML += "childWidth:" + childWidth + "<br />";
14     div.innerHTML += "childHeight:" + childHeight + "<br />";
15     div.innerHTML += "childTop:" + childTop + "<br />";
16     div.innerHTML += "childLeft:" + childLeft + "<br />";
17     
18     
19     var childParent = div.offsetParent;
20     div.innerHTML += "childParent:" + childParent.id + "<br />";
21     
22     
23     var clientWidth = div.clientWidth;
24     var clientHeight = div.clientHeight;
25     var clientTop = div.clientTop;
26     var clientLeft = div.clientLeft;
27     
28     div.innerHTML += "clientwidth:" + clientWidth + "<br />";
29     div.innerHTML += "clientHeight:" + clientHeight + "<br />";
30     div.innerHTML += "clientTop:" + clientTop + "<br />";
31     div.innerHTML += "clientLeft:" + clientLeft + "<br />";
32     
33     
34     //div.innerHTML = "";
35     var divParent = document.getElementById("divParent");
36     var scrollWidth = divParent.scrollWidth;
37     var scrollHeight = divParent.scrollHeight;
38     var scrollTop = divParent.scrollTop;
39     var scrollLeft = divParent.scrollLeft;
40     div.innerHTML+= "scrollWidth:" + scrollWidth + "<br />";
41     div.innerHTML+= "scrollHeigth:" + scrollHeight + "<br />";
42     div.innerHTML+= "scrollTop:" + scrollTop + "<br />";
43     div.innerHTML+= "scrollLeft:" + scrollLeft + "<br />";
44 </script>