Document.documentelement and Document.body and their properties

Source: Internet
Author: User

JS in Document.documentelement and Document.body and their properties

(the original HTML is Document.body--xhtml is document.documentelement, all refers to the node (or element)

The location of the fixed layer may often be used when designing the page, which requires the coordinates of some HTML objects to be more flexible in setting the coordinates of the target layer, which may be usedDocument. body.scrolltop attributes, but this property in the XHTML standard Web page or more simply labeled page of the result is 0, if not the label is all right, then the XHTML page how to get the body coordinates, of course, there are ways-useDocument. documentelement to replaceDocument. Body, you can write this
Cases:
var top =Document. documentelement.scrolltop | |Document. body.scrolltop;
in JavaScript | | is a good thing, in addition to can be used in the if and other conditional judgment, but also can be used in variable assignment. Then the example above is equivalent to the following example.
Cases:
var top =Document. documentelement.scrolltop?Document. Documentelement.scrolltop:Document. body.scrolltop;
This can be very good compatibility.

Conversely, if you don't make a statement,DocumentThe. Documentelement.scrolltop will instead be displayed as 0.


The following properties are available:

width of visible area of Web page:Document. body.clientwidth;
Web page visible Area High:Document. body.clientheight;
width of visible area of Web page:Document. body.offsetwidth (including the width of the edges);
Web page visible Area High:Document. body.offsetheight (including the width of the edges);
Page body Full text width:Document. body.scrollwidth;
Page body Full text High:Document. body.scrollheight;
The page is rolled away High:Document. body.scrolltop;
Webpage is rolled away left:Document. Body.scrollleft;
Page body part: window.screentop;
Page body part left: window.screenleft;
High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available working area height: window.screen.availHeight;
Screen available working area width: window.screen.availWidth;


ScrollHeight: Gets the scroll height of the object.
ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property
Event.clientx horizontal coordinates of relative documents
Event.clienty vertical coordinates of relative documents

Event.offsetx horizontal coordinates relative to the container
Event.offsety the vertical coordinate of the relative container
Document. documentelement.scrolltop values for vertical scrolling
event.clientx+Document. documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling
Post by Molong on 2009-05-19 11:57 PM #1

To get the vertical position of the scroll bar for the current page, use:
Document. documentelement.scrolltop;
Instead of:
Document. body.scrolltop;
The documentelement corresponds to an HTML tag, and the body corresponds to the body tag.

Under the standard,Document. Body.scrolltop constant is 0, need to useDocument. documentelement.scrolltop to replace;
If you want to position the mouse relative to the absolute position of the page, you will find that there are 999.99 articles in 1000 posts in Google that will let you use event.clientx+Document. body.scrollleft,event.clienty+DocumentBody.scrolltop, if you find that your mouse position deviates from your imagination, please do not be surprised, this is the normal thing.
IE5.5 has not been supported sinceDocumentThe. Body.scrollx object.
So when you're programming, add that judgment.
 if  (document.body && document.body.scrollTop && Document.body.scrollLeft) {   top  = =document. Body.scrollleft;      if  (document.documentelement && Document.documentElement.scrollTop && =document.documentelement.scrolltop;    left  = Document.documentElement.scrollLeft; }

"@renshengkai: JS in Document.documentelement and Document.body and its properties"

Document.documentelement and Document.body and their properties

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.