The difference between document.body and document.documentElement
Question related:
The position of the fixed layer may often be used when designing a page, which requires obtaining the coordinates of some html objects to set the coordinates of the target layer more flexibly, which may be used here.document.body.scrollTopand other attributes, but this attribute is used in xhtml standard web pages or more simply with<!DOCTYPE ..>The result obtained in the page of the tag is 0. If this tag is not used, everything is normal. How to get the coordinates of the body in the xhtml page? Of course, there is a way - usedocument.documentElementto replacedocument.body, which can be written as
example:
var top = document.documentElement.scrollTop || document.body.scrollTop;- 1
In javascript, || is a good thing. In addition to being used in conditional judgments such as if, it can also be used in variable assignment. Then the above example is equivalent to the following example.
example:
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;- 1
This way you can get good compatibility.
Conversely, if no declaration is made, document.documentElement.scrollTopInstead, it will be displayed as 0.
so:
To get the height of the scroll bar in the web page, you can pass document.body.scrollTopTo get, for example, make the div scroll with the scroll bar:
<div id="divfix" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
<javascript>
window.onscroll = function ()
{
var div = document.getElementById("divfix");
div.style.top = document.body.scrollTop + "px";
}
</javascript>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
After running, the expected effect is not achieved, and the outputdocument.body.scrollTopThe value of , is always 0. After a lot of tossing, it turned out to be a DTD problem. If the page is used directly<html>It's fine to start with. But to comply with web standards, DTD is of course indispensable.
If there is a DTD, use itdocument.documentElement.scrollTopreplacedocument.body.scrollTopThat's it.
window.onscroll = function ()
{
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}
- 1
- 2
- 3
- 4
- 5
- 6
DTD related instructions:
Document.documentElement is used when the page has a DTD, or DOCTYPE is specified.
When the page does not have a DTD, or DOCTYPE is not specified, use document.body.
This is true in both IE and Firefox .
For compatibility, with or without DTD, the following code can be used:
var scrollTop = window.pageYOffset //for FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0 ;- 1
- 2
- 3
- 4
DocumentElement and body related instructions:
body is the body child node in the DOM object, ie<body>Label;
documentElement is the root node root of the entire node tree, ie<html>Label;
DOM calls each object in the hierarchy a node, which is a hierarchical structure. You can understand it as a tree structure, just like our directory, a root directory. There are subdirectories.
Take the HTML hypertext markup language as an example: a root of the entire document is, in the DOM, you can usedocument.documentElementTo access it, it is the root node of the entire node tree. And body is a child node. To access the body tag, you should write in the script:document.body.
