Various positional distances common in HTML (clienttop clientleft clientwidth clientheight offsetleft offsettop offsetwidth offsetheight, etc.) and a discussion of coordinates in the DOM

Recently in the study of JavaScript, specifically bought a rhino horn book to see, more than 1000 pages, look at my dizzy brain up, turn to the DOM this chapter, suddenly remember the usual in the use of DOM, encountered a lot of this dom inside the various widths, height, deliberately write a write, write bad or write wrong, You are welcome to correct me. Well nonsense not much to say and begin to enter the subject.

This article mainly discusses two points:

A variety of width, height in dom

Ii. coordinate systems in the DOM

Let's see what the width and height are in the DOM.

of common

Offsetwidth	ClientWidth	ScrollWidth
Offsetheight	ClientHeight	ScrollHeight
Offsetleft	ClientLeft	ScrollLeft
OffsetTop	ClientTop	ScrollTop

Let's go to one by one to explain

Offsetleft: The outer edge distance of the bounding rectangle of the element is the left distance from the positioned parent container (offsetparent) (excluding the border of the element and the border of the parent container).

offsettop: The same way refers to the outer edge distance of the bounding rectangle of the element (excluding the border of the element and the border of the parent container) from the top of the positioned parent container (offsetparent).

Offsetwidth: Describes the element's outer dimension width, which refers to the element content width + padding width (left and right two) + border (left and right two), excluding margins and scroll bar sections.

Offsetheight: The same description of the element outer dimension height, refers to the element content height + inner margin height (up to two) + border (up to two), excluding margin and scroll bar parts.

Let's take a look at some code

<div id= "divparent" style= "PADDING:8PX; Background-color: #CCC; position:relative; " >        <div id= "Divchild" style= "Background-color: #C00; margin:30px; padding:10px            ; height:200px; width:200px; Border:solid 10px  #0000CC; " >        </div>    </div>

　　

<script type= "Text/javascript" >    var div = document.getElementById (' Divchild ');    var offsetheight = div.offsetheight;    var offsetwidth = div.offsetwidth;    div.innerhtml + = ' offsetheight: ' + offsetheight + ' <br/> ';    div.innerhtml + = ' offsetwidth: ' + offsetwidth + ' <br/> ';    var offsetleft = div.offsetleft;    var offsetTop = div.offsettop;    div.innerhtml + = ' offsetleft: ' + offsetleft + ' <br/> ';    div.innerhtml + = ' offsetTop: ' + offsetTop + ' <br/> ';    var offsetParent = div.offsetparent;    div.innerhtml + = ' offsetParent: ' + offsetparent.id + ' <br/> ';</script>

Take a look at the effect

Now we're going to follow the instructions above.

Offsetleft: (Div id=divchild) margin 30 (margin--distance from parent container 30px) + (div id=divparent) padding 8 (parent container's inner left distance 8px) =38

Offsettop:margin padding 8=38;

Offsetwidth: The width of itself (200) + the inner margin Around (10*2) + border Around (10*2) = 240;

Offsetheight: similarly;

Now let's take a look at the second group

ClientLeft: The distance between the outer edge of the inner margin of the element and the outer edge of the border, which is actually the left border width of the bounding box

ClientTop: The width of the top border of the same bounding box

ClientWidth: Used to describe the dimension width within an element, which refers to the element content + padding size, excluding borders, margins, scroll bar parts

ClientHeight: The same is used to describe the dimension height within an element, which refers to the element content + padding size, excluding borders, margins, scroll bar parts

We only change the JavaScript code, DOM does not change

Chrome version 41

ClientLeft: Left border width 10;

Clienttop:10;

ClientWidth: itself width (200) + inner margin (10*2) = 220;

ClientHeight: itself height (200) + padding (10*2) = 220;

Right, let's look at the nested div box model diagram

Div Id=divchild

Div id=divparent

In line with what we said above, let's look at the following

ScrollWidth: Content area size plus padding plus overflow dimensions, these properties are equal to clientwidth and clientheight when the content matches the content area without overflow

ScrollHeight: Ibid.

ScrollTop: The height of the roll above the scroll bar

ScrollLeft: The width of the scroll bar to the left of the volume

Okay, now let's look at some code.

<div id= "divparent"  style= "padding:8px; Background-color: #aaa; height:200px; width:300px; Overflow:auto" >        <div id= "Divchild" style= "Background-color: #0f0; height:400px; width:500px; border:solid 10px #f00;" >        </div>    </div>

　　

<script type= "Text/javascript" >    var divparent= document.getelementbyid ("divparent");    var scrollwidth = divparent.scrollwidth;    var scrollheight = divparent.scrollheight;    var scrolltop = divparent.scrolltop;    var scrollleft = divparent.scrollleft;    divchild.innerhtml + = ' clientwidth: ' + scrollwidth + ' <br/> ';    divchild.innerhtml + = ' clientheight: ' + scrollheight + ' <br/> ';</script>

Now we're going to calculate Id=divparent's scrollheight, and ScrollWidth. According to the above instructions, we know that we should calculate according to the following formula

The width of the scrollwidth= sub-div (500) + The border of the child Div (10*2) + the parent container's padding (8) =528

The height of the scrollwidth= Sub Div (400) + The border of the child Div (10*2) + the parent container's padding (8) =428

Now let's verify

We found that in IE8 and after the browser for 428,firework is also 428, while the chrome Safari opera is 436;

So we can guess that when Chrome and Safari and opera are calculating scrollheight, the next padding (8), 428+8=436, is added to the parent container;

Let's look at the values of scrolltop and scrollleft.

Test several browsers have found its value is zero, this is a swollen thing, and the almighty Baidu, Google, the original my scroll bar has been at the top and left side, no volume walk height, we modify the code, the display content bound to the Onscroll event

<script type= "Text/javascript" >    var divparent = document.getElementById ("divparent");    Divparent.onscroll = function () {        divchild.innerhtml = "";        var scrollwidth = divparent.scrollwidth;        var scrollheight = divparent.scrollheight;        var scrolltop = divparent.scrolltop;        var scrollleft = divparent.scrollleft;        divchild.innerhtml + = ' clientwidth: ' + scrollwidth + ' <br/> ';        divchild.innerhtml + = ' clientheight: ' + scrollheight + ' <br/> ';        divchild.innerhtml + = ' scrolltop: ' + scrolltop + ' <br/> ';        divchild.innerhtml + = ' scrollleft: ' + scrollleft + ' <br/> ';    } </script>

Finally found the value changed.

In addition, we use the pagexoffset,pageyoffset of the window to find the height of the scroll bar of the browser and the distance to the left, while ScrollTop, ScrollLeft can also, but pay attention to

When the DTD (document model) is declared on our page page, use Document.documentElement.scrolltop scrollleft to get the browser volume to the distance above, to the left of the volume.

If the page does not declare a DTD (in weird mode), use Document.body.scrolltop scrollleft to get the distance from the top volume to the left.

What is a DTD, here's a simple explanation, when we use VS to create a new page, it's generally stated at the top of each page

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

This confirms the model of the Web page, and then when the browser loads the page, it will select the corresponding mode to render the page.

Now let's test it.

<div id= "divparent"   style= "padding:8px; Background-color: #aaa; height:1200px; width:300px; Overflow:auto" >        <div id= "Divchild" style= "Background-color: #0f0; height:400px; width:500px; border:solid 10px #f00; positi On:absolute ">        </div>    </div>

　　

<script type= "Text/javascript" > var divparent = document.getelementsbytagname ("body") [0];        Divparent.onscroll = function () {divchild.innerhtml = "";        DivChild.style.top = Window.pageyoffset + "px";        var scrollwidth = divparent.scrollwidth;        var scrollheight = divparent.scrollheight;        var scrolltop = divparent.scrolltop;        var scrollleft = Divparent.scrollleft;        var pagexoffset = Window.pagexoffset;        var pageyoffset = Window.pageyoffset;        var documentelementtop = Document.documentElement.scrollTop;        var documentelementleft = Document.documentElement.scrollLeft;        var bodyscrolltop = Document.body.scrollTop;        var bodyscrollleft = Document.body.scrollLeft;        divchild.innerhtml + = ' clientwidth: ' + scrollwidth + ' <br/> ';        divchild.innerhtml + = ' clientheight: ' + scrollheight + ' <br/> ';        divchild.innerhtml + = ' scrolltop: ' + scrolltop + ' <br/> '; Divchild.innerhtml + = ' scrollleft: ' + scrollleft + ' <br/> ';        divchild.innerhtml + = ' pagexoffset: ' + pagexoffset + ' <br/> ';        divchild.innerhtml + = ' pageyoffset: ' + pageyoffset + ' <br/> ';        divchild.innerhtml + = ' documentelementtop: ' + documentelementtop + ' <br/> ';        divchild.innerhtml + = ' documentelementleft: ' + documentelementleft + ' <br/> ';        divchild.innerhtml + = ' bodyscrolltop: ' + bodyscrolltop + ' <br/> ';    divchild.innerhtml + = ' bodyscrollleft: ' + bodyscrollleft + ' <br/> '; }</script>

Chrome test results, we found Pagexoffset document.body.scrolltop can be used, but note my current statement HTML5 <! DOCTYPE Html>, description document.documentelement can be used.

Look at the results of the Firefox test, the same declaration of the type of document here document.documentelement can be used, it is really day of the dog, it is HTML5 document type Special, we test other types of document types

But the findings are the same as above, OK, no matter what the above, the following summarizes how compatible scrolltop if it is scrolltop can take body.scrolltop and Documen.documentelement.scrolltop's Max value, so that no matter how often a correct value is taken.

We know how to take the ScrollTop value in the section above, and then we'll cover the window coordinates and the document coordinates in the DOM.

Window coordinates: the coordinates of the upper-left corner of the currently displayed page (if a scrollbar appears and the ScrollBar scrolls, the window coordinates and the document coordinates are inconsistent because the window coordinates show only the portion of the currently displayed page, and the document may be obscured by the scroll bar);

Document coordinates: Vertical scroll bar at the top, no scrolling, horizontal scroll bar at the leftmost, no scroll, when the top left of the coordinate

If there is no scroll bar, the window coordinates and the document coordinates are the same.

So how do you convert between window coordinates and document coordinates, where we're going to use the height and coordinates of the scroll bar above, assuming that there is an element in the document with a y-coordinate (that is, vertical) is 200px; but we scroll down by 75px with the scroll bar, Then the current window coordinates are 125px;

So if the value of ScrollTop is greater than 0, the coordinates of our window y= the coordinates of the document Y-SCROLLTOP,

At the same time viewport coordinates have corresponding methods can be used

You can invoke the Getboundingclientrect method of an element . The bottom method returns an object with a left, right, top, and a property that represents the coordinates of the four positions of the element relative to a viewport. The coordinates returned by getboundingclientrect contain the inner margins and borders of the elements, and do not contain margins. Compatibility is very good, very useful.

Put a code on the rhino horn.

Get scroll bar value

function Getscrolloffsets (w) {            var w = w | | window;
           In addition to IE8 and earlier versions, other browsers can use            if (w.pagexoffset! = null) {                return {x:w.pagexoffset, y:pageyoffset};            }
            Callout mode IE (or any browser)            var d = w.document;            if (Document.compatmode = = "Css1compat")                return {x:d.documentelement.scrollleft, y:d.documentelement.scrolltop} ;
                Strange mode (no declaration DTD)            return {x:d.body.scrollleft, y:d.body.scrolltop};        }
By using this function discovery is also not very compatible in Chrome has always been 0, stating that even in the standard model, the DTD Chrome is not able to take the documentelement.scrollleft value. Opera is also not worth the value, Firefox can take value. So I use Math.max (Docuemnt.body.scrolltop,docuemnt.documentelement.scrolltop) in the early normal use.
Okay, here's what we're going to do today. If there are errors, welcome to Blog Park Friends to correct

Various positional distances common in HTML (clienttop clientleft clientwidth clientheight offsetleft offsettop offsetwidth offsetheight, etc.) and a discussion of coordinates in the DOM