Difference and usage of scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth, clienttop
These attributes are often used for scrolling. They are generally as follows:
First, define a div. The style is as follows:
<Style>
* {Margin: 0px; padding: 0px ;}
Body {margin: 0px; padding: 10px; border: solid 10px # 69F ;}
. Aa {margin: 20px auto 0px; width: 100px; height: 50px; overflow: auto; border: solid 1px # cccccc; padding: 0px 10px ;}
</Style>
<Script type = "text/javascript">
Window. onload = test;
Function test (){
Var aa = document. getElementById ("aa ");
// Aa. scrollTop = 60;
// Alert (aa. scrollTop); // If the scroll bar does not scroll, it is set to 0. For example, if the scroll bar is 20, 20 is displayed.
// Alert (document. body. scrollHeight); // The height of the webpage displayed on the screen, that is, 666 of the height of a screen
// Alert (document. body. clientTop); // 10 indicates the top Border width of the body.
// Alert (aa. style. top); // nothing will pop up ???
// Alert (aa. scrollTop); // 60 if the value of aa. scrollTop is not set to 60, that is, when the scroll bar is not scrolled, 0 is displayed.
// Alert (aa. offsetTop); // 40 div offset the distance from the top window
// Alert (aa. clientTop); // 1 indicates the upper border of the div
// Alert (aa. scrollHeight); // the total height of the 380 div content. That is, the height is not set, so that the content can be adaptive to the height + padding.
// Alert (aa. offsetHeight); // Add Up and down padding to the height of the 72 div, and add border, that is, height + paading + border.
// Alert (aa. clientHeight); // Add Up and down padding to the height of the 70 div, that is, height + padding.
// Alert (document. body. clientHeight) // The height of content displayed on the 112 Screen
// Alert (aa. clientWidth); // The width of the 103 div minus the width of the scroll bar and the Left and Right padding
// Alert (aa. scrollWidth); // The width of the 103 div minus the width of the scroll bar plus the Left and Right padding, which is the same as that of aa. clientWidth.
// Alert (aa. offsetWidth); // Add padding + border to the width of the 122 div, that is, width + padding + border.
// Alert (document. body. clientWidth); // 1346 the width of the entire screen minus the Left and Right border of the body, that is, 1366-20
// Alert (document. body. offsetWidth); // 1366 the width of the entire Screen
Alert (aa. clientLeft); // 1 is the left border of the div
Alert (aa. scrollLeft); // 0 the scroll bar does not scroll to the right, so 0 is displayed.
Alert (aa. offsetLeft); // ie and Google are 622, Firefox is 612, that is, ie and Google contain the left border of the body, while Firefox does not include the left border of the body. In short
The distance between the div and the left side of the window.
Alert (document. body. clientLeft); // 10 indicates the left border of the body.
}
</Script>
Div. scrollTop: if the above aa. scrollTop is not set to 60, that is, when the scroll bar is not scrolled, 0 is displayed.
Div. offsetTop: the distance from the top window of the div offset
Div. clientTop: upper border of div
Div. scrollHeight: the total height of the div content, that is, the height of the content is not set, so that the content is adaptive to get the height + padding
Div. offsetHeight: add the height of the entire div with the upper and lower borders and the border. That is, the height of the entire div. That is, height + padding + border
Div. clientHeight: the height of the div specified in the css style file plus the upper and lower padding, without the height of the lower border. That is, height + padding
Document. body. clientHeight: the height of the content displayed on the screen does not contain the upper and lower borders of the body.
Div. clientWidth: The div width minus the scroll bar width plus the Left and Right padding
Div. scrollWidth: The same as div. clientWidth.
Div. offsetWidth: Add padding + border to the div width, that is, width + padding + border.
Document. body. clientWidth: the width of the entire screen, that is, the display resolution width of the screen width minus the left and right borders of the body
Document. body. offsetWidth: the width of the entire screen, that is, the width of the display resolution of the screen width. 1366
Div. clientLeft: The left border of the div
Div. scrollLeft: the distance from the scroll bar to the right
Div. offsetLeft: The Left Border between the div and the window. ie and Google contain the left border of the body. Firefox does not include the left border of the body. That is, the Left Border of the body is reduced by ie and Google in Firefox.
Document. body. clientLeft: Left Border of the body
What is the difference between scrollTop and offsetTop in javascript?
ScrollTop refers to the distance from a scroll block to scroll down. For example, if 10 pixels are rolled down, the scrollTop attribute value of this element is 10;
OffsetTop is the absolute distance between the upper border of the element and the upper border of the parent element.
The two are not the same, so they are not comparable.
Js determines whether the mouse position is in a div
The solution is to first determine whether the mouse is inside the div when the onmouseout event is triggered. If the mouse is inside the div, it means that the mouse has not left the div. Otherwise, the div will not be deleted. OK. Now the problem is solved. Find the coordinates in the upper left corner and lower right corner of the div to determine whether the coordinates of the mouse are in this area. Div. onmouseout = function (event) {var div = document. getElementById ("test"); var x = event. clientX; var y = event. clientY; var divx1 = div. offsetLeft; var divy1 = div. offsetTop; var divx= div. offsetLeft + div. offsetWidth; var divy2 = div. offsetTop + div. offsetHeight; if (x <divx1 | x> divx| | y <divy1 | y> divy2) {// if it is left, run ..} The following are some common attributes for easy search: clientHeight obtains the height of the object, and does not calculate any margin, border, or scroll bar, but includes the object's padding. ClientLeft gets the distance between the offsetLeft attribute and the actual left side of the customer region. ClientTop obtains the distance between the offsetTop attribute and the actual top of the customer region. ClientWidth is used to obtain the width of an object. It does not calculate any margin, border, or scroll bar, but includes the padding of the object. OffsetHeight gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute. OffsetLeft obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute. OffsetParent gets the reference of the container Object Defining the offsetTop and offsetLeft attributes of the object. OffsetTop obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute. OffsetWidth gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute. OffsetX is used to set or obtain the x coordinate between the cursor position and the object that triggers the event. OffsetY is used to set or obtain the y coordinate of the object relative to the trigger event. ScreenX and screenY are relative to the position of the user's monitor. The visible area width of the webpage is: document. body. clientWidth: the visible area of the webpage is high: document. body. visible area width of clientHeight webpage: document. body. offsetWidth (including the width of the edge) visible area of the webpage Height: document. body. offsetHeight (including the edge width): document. body. scrollWidth: The full text of the webpage is high: document. body. scrollHeight the height of the webpage to be rolled: document. body. the left: document. body. scrollLeft: window. screenTop page text part left: window. screenLeft screen resolution Height: window. screen. height the screen resolution width: window. screen. width: available workspace height of the screen: window. screen. availHeight available workspace width: window. screen. av ...... remaining full text>
