DocumentElement knowledge Summary

Source: Internet
Author: User

Source:
Obtains the height and width of the current browser window.

Solution text:
<Script type = "text/javascript">
// From ppk (http://www.jr.pl/www.quirksmode.org/viewport/compatibility.html)
Var x, y;
If (self. innerHeight) // all variables t Explorer
{
X = self. innerWidth;
Y = self. innerHeight;
}
Else if (document.doc umentElement & document.doc umentElement. clientHeight)
// Explorer 6 Strict Mode
{
X = document.doc umentElement. clientWidth;
Y = document.doc umentElement. clientHeight;
}
Else if (document. body) // other Explorers
{
X = document. body. clientWidth;
Y = document. body. clientHeight;
}
</Script>

Solution Process:
About document.doc umentElement:

W3c: This is a convenience attribute that allows direct access to the child node that is the root element of the document. for HTML documents, this is the element with the tagName "HTML ". he is a root node element that can easily point to a document. For example, the HTML Tag is specified in an HTML document.]
Mozilla developer: Returns the Element that is the root element of the document (for example, the MSDN: Gets a reference to the root node of the document.

The CSSOM View Module excerpt and its own translation (correction is welcome)

I have doubts about the WindowView interface, which contains initialize ent properties such as innerWidth.
I suspect that the WindowView Interface contains some very old methods, such as innerWidth.

The problem is that innerWidth/Height and pageXOffset/pageYOffset are essential doubles: they report the same information as document.doc umentElement. clientWidth/Height and document.doc umentElement. scrollTop/Left: the inner width of the viewport (browser window) and the scrolling offset of the document.
The problem is that innerWidth/Height and pageXOffset/pageyoffsethave dual characteristics. document.doc umentElement. clientWidth/heightand document.doc umentElement. scrollTop/Left also provide the same information: browser internal window and document scroll bar offset.

Since we already have that information available, why repeat it? The only reason wocould be that there might be situations where the documentElement does not span the entire viewport, but as far as I know these situations don't exist nowadays, and frankly I wonder if they'll ever exist.
Since we have obtained valid information, why should we repeat it? The only reason for this may be that the solution to documentElement cannot span the entire window. But as far as I know, this problem has been solved today. I also want to know if it has existed.

I created a quick test that gives the root I made an example to add margin and border to the tag
So even though the root element may appear to cover only part of the viewport, JavaScript still acts as if it covers the entire viewport. that makes sense: there is no block-level element that contains the root element (or the root element wouldn't be the root element ).
Even if the root element may overwrite a part of the window, javascript still shows its existence when it overwrites the entire window. The conclusion is that no block-level element can contain the root element.

The other properties of the window view, outerWidth/Height and screenX/Y, are mostly useless. they 've been und since Netscape 3, and in the ten years I 've been writing scripts I 've never needed to use either of them.
Other Properties of window, outerWidth/Height and screenX/Y, are basically invalid. he was widely used in Netscape 3, and I have never used it again when I write scripts in recent years.

For al these reasons I'm wondering if the WindowView shouldn't be scrapped outright. It just serves no purpose.
For some other reasons, I doubt whether WindowView should be discarded. But this does not help!

Related Article

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.