Detailed explanation of how to use offset, client, and scroll in JavaScript

offsetTop refers to the position of the element from the top or upper control, integer, unit pixel.
offsetLeft refers to the position of the element from the left or upper control, integer, unit pixel.
offsetWidth refers to the width of the element control itself, integer, unit pixel.
offsetHeight refers to the height of the element control itself, integer, unit pixel.
Visible area width of web page: document.body.clientWidth
Visible area height of web page: document.body.clientHeight
Visible area width of web page: document.body.offsetWidth (including the width of the edge)
Visible web page Area height: document.body.offsetHeight (including the width of the edge)
Full text width of the web page body: document.body.scrollWidth
Full text height of the web page body: document.body.scrollHeight
Height of the web page being scrolled: document.body.scrollTop
The left side of the web page being scrolled: document.body.scrollLeft
The upper part of the main body of the web page: window.screenTop
The left side of the main body part of the web page: window.screenLeft
The high screen resolution ：window.screen.height
The width of the screen resolution: window.screen.width
The available working area height of the screen: window.screen.availHeight
The width of the available working area of ​​the screen: window.screen.availWidth
Here are the interpretations of clientHeight, offsetHeight and scrollHeight of document.body by four browsers.
The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
clientHeight
The four browsers have no objection to the interpretation of clientHeight. They all think it is the height of the visible area of ​​​​the content, which means that the height of the area where the content can be seen in the page browser is usually the last one. This area from below the toolbar to above the status bar has nothing to do with the page content.
offsetHeight
IE and Opera believe that offsetHeight = clientHeight + scroll bar + border.
NS and FF believe that offsetHeight is the actual height of the web page content, which can be smaller than clientHeight.
scrollHeight
IE and Opera believe that scrollHeight is the actual height of the web page content, which can be smaller than clientHeight.
NS and FF believe that scrollHeight is the height of the web page content, but the minimum value is clientHeight
Introduction:
1. offsetLeft
Assume that obj is an HTML control.
obj.offsetTop refers to the position of obj from the top or upper control, integer, unit pixel.
obj.offsetLeft refers to the position of obj from the left or upper control, integer, unit pixel.
obj.offsetWidth refers to the width of the obj control itself, integer, unit pixel.
obj.offsetHeight refers to the height of the obj control itself, integer, unit pixel.
Let’s explain the “top or upper” and “left or upper” controls mentioned earlier.
For example:

<p id="tool"> 
<input type="button" value="提交"> 
<input type="button" value="重置"> 
</p>

The offsetTop of the "Submit" button refers to the distance between the "Submit" button and the upper border of the "tool" layer, because the closest to its upper edge is the upper border of the "tool" layer.
The offsetTop of the "Reset" button refers to the distance between the "Reset" button and the upper border of the "tool" layer, because the closest to it is the upper border of the "tool" layer.
The offsetLeft of the "Submit" button refers to the distance between the "Submit" button and the left border of the "tool" layer, because the closest to its left is the left border of the "tool" layer.
The offsetLeft of the "Reset" button refers to the distance between the "Reset" button and the right border of the "Submit" button, because the closest to its left is the right border of the "Submit" button.
The above properties are also valid in FireFox.
In addition: what we are talking about here refers to the attribute value of the HTML control, not document.body. The value of document.body has different interpretations in different browsers (in fact, in most environments, it is due to the interpretation of document.body The difference is not caused by different interpretations of offset), click here to view the differences.
Title: The difference between offsetTop and style.top
Preliminary knowledge: offsetTop, offsetLeft, offsetWidth, offsetHeight
We know that offsetTop can get the position of the HTML element above or outside the element, and style.top can also be used , the difference between the two is:
1. offsetTop returns a number, while style.top returns a string. In addition to the number, it also has the unit: px.
2. offsetTop is read-only, while style.top is read-writeable.
3. If the top style is not specified for the HTML element, style.top returns an empty string.
The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.
Title: clientHeight, offsetHeight and scrollHeight
Here we talk about the interpretation of clientHeight, offsetHeight and scrollHeight of document.body by four browsers. Here we are talking about document.body. If it is an HTML control, there are Different, click here to view.
The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
2. clientHeight
clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​the content, which means the height of the area where the content can be seen in the page browser, usually The area below the last toolbar and above the status bar has nothing to do with the page content.
offsetHeight
IE and Opera believe that offsetHeight = clientHeight + scroll bar + border.
NS and FF believe that offsetHeight is the actual height of the web page content, which can be smaller than clientHeight.
scrollHeight
IE and Opera believe that scrollHeight is the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of web page content, but the minimum value is clientHeight.
Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web content heights, but when the web content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.
Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.
But
FF has different interpretations of clientHeight in different DOCTYPEs, but it is not explained as above in xhtml 1 trasitional. Other browsers do not have this problem.
Title: scrollTop, scrollLeft, scrollWidth, scrollHeight
3, scrollLeft
scrollTop is the height value of the "scroll", example:

Since scrollTop is set for the outer element p, the inner element will scroll upward.
scrollLeft is similar.
We already know that offsetHeight is the width of its own element.
And scrollHeight is the absolute width of the internal element, including the hidden part of the internal element.
In the above, the scrollHeight of p is 300, and the offsetHeight of p is 100.
scrollWidth is similar.
IE and FireFox fully support it, while Netscape and Opera do not support scrollTop and scrollLeft (except document.body).
Title: offsetTop, offsetLeft, offsetWidth, offsetHeight
4, clientLeft
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度
一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果：
1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
5.offsetParent :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
得到绝对位置脚本代码

function GetPosition(obj) 
{ 
var left = 0; 
var top = 0; 

while(obj != document.body) 
{ 
left = obj.offsetLeft; 
top = obj.offsetTop; 

obj = obj.offsetParent; 
} 

alert("Left Is : " + left + "\r\n" + "Top Is : " + top); 
}

6.scrollLeft : 
对象的最左边到对象在当前窗口显示的范围内的左边的距离． 
即是在出现了横向滚动条的情况下，滚动条拉动的距离． 
7.scrollTop 
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离． 
即是在出现了纵向滚动条的情况下，滚动条拉动的距离． 
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。 
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。 
clientHeight 
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 
offsetHeight 
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。 
scrollHeight 
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 
简单地说 
clientHeight 就是透过浏览器看内容的这个区域高度。 
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。 
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加

更多Detailed explanation of how to use offset, client, and scroll in JavaScript相关文章请关注PHP中文网！