How to use JavaScript to get the location and size of DOM elements _ basics

In some complex pages, JavaScript is often used to deal with the dynamic effects of some DOM elements, we often use some of the elements of the location and size of the calculation, browser compatibility problem is an indispensable part, to write the desired effect of JavaScript code, We need to know some basic knowledge.

Basic concepts

To facilitate understanding, we need to understand several basic concepts, each with the following attributes

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

To understand these attributes, we need to know that the actual content of the HTML element may be larger than the box allocated to hold the content, so the scroll bar may appear, the content area is the viewport, and when the actual content is larger than the viewport, the element's scroll bar position needs to be taken into account.

1. ClientHeight and clientwidth are used to describe elements within dimensions, meaning element content + inner margin size, excluding borders (actually included in IE), outer margins, scroll bar sections

2. Offsetheight and offsetwidth are used to describe the outer dimensions of elements, which refer to element content + inner margin + border, excluding the outer margin and scrollbar parts

3. ClientTop and ClientLeft returns the horizontal and vertical distance between the edge of the inner margin and the outer edge of the border, that is, the left, top border width

4. offsettop and offsetleft represent the distance between the upper-left corner of the element (the outer edge of the border) and the upper-left corner of the positioned parent container (offsetparent object)

5. The Offsetparent object refers to the most recent position (Relative,absolute) ancestor element of the element, which returns a null if no ancestor element is positioned.

Write a small example to facilitate understanding

Copy Code code as follows:

<div id= "divparent" style= "PADDING:8PX; Background-color: #aaa; position:relative; " >
<div id= "Divdisplay" style= "Background-color: #0f0; margin:30px; padding:10px;
height:200px; width:200px; Border:solid 3px #f00; " >
</div>
</div>

Copy Code code as follows:

<script type= "Text/javascript" >
var div = document.getElementById (' Divdisplay ');

var clientheight = div.clientheight;
var clientwidth = div.clientwidth;
div.innerhtml + = ' clientheight: ' + clientheight + ' <br/> ';
div.innerhtml + = ' clientwidth: ' + clientwidth + ' <br/> ';

var clientleft = Div.clientleft;
var clienttop = div.clienttop;
div.innerhtml + = ' clientleft: ' + clientleft + ' <br/> ';
div.innerhtml + = ' clienttop: ' + clienttop + ' <br/> ';

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>

Effect as shown

From the graph we can see that clientheight is the height of the div + 10px padding,clientwidth the same

and ClientLeft and ClientTop are div left, top border width

Offsetheight is the clientheight+ of the border width of the upper and lower 3px, offsetwidth the same

Offsettop is the maggin+offsetparent 8px padding,offsetleft div 30px.

6. ScrollWidth and ScrollHeight are elements of the content area plus the internal margin plus the overflow dimension, when the content is exactly the same as the content area matching does not overflow, these properties and clientwidth and clientheight equal

7. ScrollLeft and ScrollTop refer to the element scroll position, which is writable

Let's write a simple example to understand

Copy Code code as follows:

<div id= "divparent" style= "Background-color: #aaa; padding:8px; Border:solid 7px #000; height:200px; width:500px; Overflow:auto; " >
<div id= "Divdisplay" style= "Background-color: #0f0; margin:30px; padding:10px;
height:400px; width:200px; Border:solid 3px #f00; " >
</div>
</div>

Copy Code code as follows:

<script type= "Text/javascript" >
var DIVP = document.getElementById (' divparent ');
var divd = document.getElementById (' Divdisplay ');

var scrollheight = divp.scrollheight;
var scrollwidth = divp.scrollwidth;
divd.innerhtml + = ' scrollheight: ' + scrollheight + ' <br/> ';
divd.innerhtml + = ' scrollwidth: ' + scrollwidth + ' <br/> ';
</script>

In Firefox and IE10 (IE10 the following version of the box model and the standards of the international standard, not discussed, compatibility issues will be described below) to get results scrollheight:494, and in Chrome and Safari results scrollheight: 502, the difference is 8px, according to 8 can be simply speculated that is divparent padding, to calculate whether the

We can see how their results come from, first of all, scrollheight must contain the height of the divdisplay required 400px height + up and down each 10px padding+ up and down each 3px border+ up and down each 30px margin, so

400+10*2+3*2+30*2=486

Such 486+8=494, 486+8*2=502 really is so, under the Firefox and IE10 under no calculation padding

With this basic knowledge, we can calculate the position and size of the elements.

Coordinates relative to the document and viewport

When we compute a DOM element's position, which is the coordinates, it involves two kinds of coordinate systems, document coordinates and viewport coordinates.

The document we use most often is the entire page, not just the visible part of the window, but also the part of the scroll bar because of the window size limit, and the upper-left corner is what we call the origin in relation to the document coordinates.

The viewport is part of the browser that displays the contents of the document, excluding the browser shell (menu, toolbar, status bar, etc.), which is the current Window Display page section, excluding scroll bars.

If the document is smaller than the viewport, there is no scrolling, the upper-left corner of the document is the same as the upper-left corner of the viewport, and in general switching between the two coordinate systems needs to be added or subtracted from the scrolling offset (scroll offset).

In order to convert between coordinate systems, we need to determine the scroll bar position of the browser window. The Pagexoffset and pageYOffset of the window object provide these values, except IE 8 and earlier versions. You can also get the scroll bar position through the scrollleft and ScrollTop properties, normally by querying the document root node (document.documentelement) To obtain these property values, but in weird mode you must query through the body of the document.

Copy Code code as follows:

function Getscrolloffsets (w) {
var w = W | | Window
if (W.pagexoffset!= null) {
return {x:w.pagexoffset, y:pageyoffset};
}
var d = w.document;
if (Document.compatmode = = "Css1compat")
return {x:d.documentelement.scrollleft, y:d.documentelement.scrolltop};
return {x:d.body.scrollleft, y:d.body.scrolltop};
}

Sometimes it's very useful to be able to judge the size of a viewport.

Copy Code code as follows:

function Getviewportsize (w) {
var w = W | | Window
if (w.innerwidth!= null)
return {w:w.innerwidth, h:w.innerheight};
var d = w.document;
if (Document.compatmode = = "Css1compat")
return {w:d.documentelement.clientwidth, h:d.documentelement.clientheight};
return {w:d.body.clientwidth, h:d.body.clientheight};
}

Document coordinates

Any HTML element has the X and Y coordinates of the offectleft and Offecttop properties that return the element, for many elements, the values are document coordinates, but for locating element descendants and some other elements (table cells), the coordinates are returned relative to the ancestors. We can calculate by a simple recursive trace

Copy Code code as follows:

function Getelementposition (e) {
var x = 0, y = 0;
while (e!= null) {
x + + E.offsetleft;
Y + = e, offsettop;
e = e.offsetparent;
}
return {x:x, y:y};
}

However, this function does not always compute the correct value, and when the document contains scrollbars, this method does not work, we can only use this method without the scroll bar, but we use this principle to calculate the coordinates of some elements relative to a parent element.

Viewport coordinates

The calculation of the viewport coordinates is relatively simple and can be achieved by invoking the Getboundingclientrect method of the element. method returns an object with the left, right, top, and bottom properties, representing the coordinates relative to the viewport for the four positions of the element. The coordinates returned by the getboundingclientrect contain the inner margin and border of the element, and do not include the outer margin. Good compatibility, very easy to use

Element dimensions

By calculating the coordinate method above, we can draw the element size conveniently. The objects returned in the Getboundingclientrect browser are also width and height, but are not implemented in the original IE, but can be easily computed by returning the Right-left and Bottom-top of the object.