You need to get the coordinates of some HTML objects to set the coordinates of the target layer more flexibly. Here you can use attributes such as document.body.scrollTop, but these attributes are obtained in the standard web page of xhtml or, in simple terms, the value obtained in the tag with <!DOCTYPE...> is 0; if you don't have this tag, everything is normal, so how to get the coordinates of the body in xhtml? Of course there is a way. We use document.documentElement to replace document.body. For example, you can write it like this:
The code copy is as follows:
var top=document.documentElement.scrollTop ||document.body.scroolTop;
|| in js is a good thing. It can not only be used in the conditional statement of if, but also in the assignment of variables. The above example can be written in the following format:
The code copy is as follows:
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop;
This way, it can have good compatibility. One thing to note is that if the value of document.documentElement.scrollTop is not declared, it will display 0 instead.
Instructions to obtain the vertical coordinate position of the scroll bar coordinate on the current page:
document.documentElement.scrollTop instead of
document.body.scrollTop;
document.documentElement gets the html tag.
document.body gets the body tag;
Under standard w3c, document.body.scrollTop is always 0, and document.documentElement.scrollTop needs to be replaced by document.documentElement.scrollTop;
If we want to locate the absolute position of the mouse relative to the page, most of the results we get in search engines will let you use
event.clientX+document.body.scrollLeft , event.clientY+document.body.scrollTop;
It's strange if you find that the mouse deviates from your imagination, because the document.body.scrollX object is no longer supported after IE5.5.
So we need to add one sentence;
The code copy is as follows:
if (document.body && document.body.scrollTop &&document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop&& document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
The following are some usages of parameters:
The visible area width of the web page: document.body.clientWidth;
The visible area height of the web page: document.body.clientHeight;
The visible area width of the web page: document.body.offsetWidth; (including the width of the edge line);
The visible area height of the web page: document.body.offsetHeight; (including the width of the edge);
The full text width of the web page: document.body.scrollWidth;
Full text of the web page: document.body.scrollHeight;
The web page is rolled out at a high level: document.body.scrollTop;
The left of the web page being rolled out: document.body.scrollLeft;
On the main part of the web page: windows.screenTop;
Left of the web page text part: windows.screenLeft;
High screen resolution: windows.screen.height;
Width of screen resolution: windows.screen.widht;
The available workspace height of the screen: windows.screen.availHeight;
Screen Available Workspace Width: windows.screen.availWidth;
Get the scroll height of the object: scrollHeight;
Set or get the distance between the left boundary of the object and the leftmost end of the currently visible content in the window: scrollLeft;
Set or get the distance between the top of the object and the top of the visible content in the window: scrollTop;
Get the scroll width of the object: scrollWidth;
Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate: offsetParent property: offsetHeight;
Get the left position of the calculation of the object relative to the layout or the parent coordinate specified by the offsetParent property: offsetLeft;
Get the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop property: offsetTop;
event.clientX: Horizontal coordinates relative to the document;
event.clientY: the vertical coordinate relative to the document;
event.offsetX: Horizontal coordinates relative to the container;
event.offsetY: the vertical coordinate relative to the container;
document.documentElement.scrollTop: Set the vertical height of the scroll
event.clientX + document.documentElement.scrollTop: horizontal position relative to the document + the scrolling amount in the vertical direction;