scrollHeight: get rolling height of the object.
scrollLeft: Sets or retrieves the left and the object distance between the window currently visible content of the leftmost
scrollTop: Gets or sets the distance between the object located in the top of the topmost visible in the window contents
scroll width acquisition targets: scrollWidth
offsetHeight: Get the height of the object relative to the layout or the coordinates specified by the parent coordinate parent offsetParent property
offsetLeft: acquiring object relative to the layout or left position is calculated by the specified coordinate parent offsetParent property
offsetTop: acquiring layout or a property of the object with respect to offsetTop calculating the tip position specified coordinate parent
event.clientX horizontal coordinate relative to the document is
perpendicular to the relative coordinate event.clientY document
level event.offsetX coordinates relative to the container
vertical coordinate relative to the container event.offsetY
document.documentElement.scrollTop vertical scrolling value
event.clientX document.documentElement.scrollTop horizontal coordinate relative to the document + + amount of scrolling in the vertical direction
than in the main means IE, FireFox differences are as follows:
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
clientWidth
object visible width, excluding edges scroll bars will be displayed with the size of the window changes.
scrollWidth
wide actual content objects, excluding width of the line will change with the number of object content (content more than the actual width of the objects may change)
offsetWidth
visible width of the object, scroll bars package edges, will vary with the size of the display window.
------------------------------------------------
a scrollWidth and examples of clientWidth:
<HTML>
<head>
<title> 77.htm file </ title>
</ head>
<body>
<TextArea wrap = "OFF" the onfocus = "Alert ( 'scrollWidth:' this.scrollWidth + + '\ n-the clientWidth:' + this.clientWidth);"> </ TextArea>
</ body>
</ HTML>
In typing text box, did not come out when the horizontal scroll bar and values before scrollWidth clientWidth is the same.
When the content exceeds the line width of the text box, scroll bar laterally out there, scrollWidth values had changed.
scrollWidth width of the object is the actual content.
clientWidth width (free edge) of the object seen, this example does not change.
-----------------------------------------------
a clientWidth and examples of offsetWidth:
<HTML>
<head>
<title> 77.htm file </ title>
</ head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth always play value than the value clientWidth
clientWidth width of the object is seen (free edge)
offsetWidth width of the object is seen (including the edges, such as the width occupied by the scroll bar)
Reproduced in: https: //www.cnblogs.com/zhangchenliang/archive/2011/06/07/2074477.html