Document. Body compatibility with W3C standards

Source: Internet
Author: User

The umentelement is replaced by document. Body to solve the problem.
When the problem is solved after umentelement, sometimes the mind cannot be bent, so as to avoid making the same mistake in the future ..

For example:
1. If the webpage contains <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This line of code should use document.doc umentelement
2. If there is only one line of code on the webpage, The JS script should use document. Body

The following is a bit of information found on the internet, hoping to be useful in the future:

The fixed layer location may be frequently used during page design. In this case, you need to obtain the coordinates of Some HTML objects to set the coordinates of the Target layer more flexibly. document may be used here. body. scrolltop and other attributes, but this attribute is included in the XHTML standard webpage or, more simply, with <! Doctype...> extends umentelement to replace document. body. You can write
Example:
VaR Top = document.doc umentelement. scrolltop | document. Body. scrolltop;
| In Javascript is a good thing. Besides being able to be judged by conditions such as if, it can also be used to assign values to variables. The preceding example is equivalent to the following example.
Example:
VaR Top = document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop;
This write can be well compatible.

In contrast, if you do not declare it, document.doc umentelement. scrolltop is displayed as 0.

The attributes are as follows:

Visible area width of the webpage: Document. Body. clientwidth;
Visible area height: Document. Body. clientheight;
Visible area width of the webpage: Document. Body. offsetwidth (including the width of the edge );
Visible area height of the webpage: Document. Body. offsetheight (including the width of the edge );
Full text width of the webpage: Document. Body. scrollwidth;
Webpage text height: Document. Body. scrollheight;
The height of the page to be rolled: Document. Body. scrolltop;
Left of the webpage to be rolled: Document. Body. scrollleft;
Page body: window. screentop;
Page body part left: window. screenleft;
Screen Resolution Height: window. Screen. height;
Screen Resolution width: window. Screen. width;
Available screen workspace Height: window. Screen. availheight;
Available screen workspace width: window. Screen. availwidth;

Scrollheight: gets the scroll height of an object.
Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.
Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window.
Scrollwidth: gets the scroll width of an object.
Offsetheight: gets the height of an 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.
Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute.
The horizontal coordinates of event. clientx relative to the document
The vertical coordinates of event. clienty relative to the document

Horizontal coordinates of event. offsetx relative to the container
Event. offsety vertical coordinates of the container
Document.doc umentelement. scrolltop vertical scroll Value
Event.clientxw.document.doc umentelement. The horizontal coordinate of scrolltop relative to the document + The amount of vertical scrolling
Post by molong on PM #1

To obtain the ordinate position of the scroll bar of the current page, use:
Document.doc umentelement. scrolltop;
Instead:
Document. Body. scrolltop;
Documentelement corresponds to HTML tags, while body corresponds to body tags.

In the standard w3c, the value of document.body.scrolltopic is 0, and the value of document.doc umentelement. scrolltop is used;
If you want to locate the absolute position of the mouse relative to the page, you will find that there are 1000 articles in Google that will allow you to use event. clientx + document. body. scrollleft, event. clienty + document. body. scrolltop, if you find that your mouse position is away from your imagination, please do not be surprised, this is a normal thing.
Ie5.5 and later do not support document. Body. scrollx objects.
Therefore, when programming, add such a judgment.

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.