DOM element size and position

First, get the element CSS size

1. Get the size of an element by using the style inline

var // get Element // 200px, Empty // 200px, Empty

The style gets the width and height of the CSS style that can only be obtained into the inline style property, if there is a fetch, or null if none.

2. Get the size of an element by calculation

var style = window.getComputedStyle?  nullnull | |  //1424px, 200px, auto//18px, 200px, Auto

The calculation gets the size of the element, regardless of whether you are inline, inline, or linked, and it is calculated to return the results. If the size itself is set, it returns the size of the element, and if it is not set itself, the non-IE browser returns the default size, ie the browser returns auto.

3. Get the element size through the Cssrules (or rules) property in the Cssstylesheet object

var // get link or style var // get the first rule // 200px, Empty // 200px, Empty

Cssrules (or rules) can only get the width and height of inline and link styles, and cannot get into inline and calculated styles

Summary: The above three kinds of CSS to get the element size, can only get the element's CSS size, but cannot get the meta
The actual size of the vegetarian itself. For example, with padding, scroll bars, borders and so on.

Second, get the actual size of the element
1.clientWidth and ClientHeight
This set of properties can get the size of the visual area of an element, and the amount of space occupied by the element's content and padding.

//  $ //  $

PS: Returns the element size, but no unit, the default unit is PX, if you forcibly set the unit, such as 100EM, it will return the size of PX. (CSS gets it, you get it according to the style you set).
PS: For the actual size of the elements, the clientwidth and clientheight understand the following ways:
1. Add frame, no change, 200;
2. Increase margin, no change, 200;
3. Increase the scroll bar, the final value is equal to the original size minus the size of the scroll bar, 184;
4. Increase the inner margin, the final value is equal to the original size plus the size of the inner margin, 220;
PS: If you do not set any CSS width and height, then non-IE browser will calculate the scroll bar and padding of the calculated size, and IE browser returns 0.

2.scrollWidth and ScrollHeight
This set of properties can get the element size of the scrolled content.

//  $ //  $

PS: Returns the element size, the default unit is PX. If you do not set the width and height of any CSS, it will get the calculated widths and heights.
PS: For the actual size of the elements, ScrollWidth and scrollheight understand as follows:
1. Add a border, different browsers have different explanations:
A) Firefox and opera browsers will increase the size of the frame, X 220
b) IE, Chrome and Safari browser will ignore border size, x 200
c) IE Browser only displays the height of its original content, x 18
2. Increase the inner margin, the final value will be equal to the original size plus the size of the inner margin, 220,ie x 38
3. Increase the scroll bar, the final value will be equal to the original size minus the scrollbar size, 184 x 184,ie to 184 x 18
4. Increase the margin, no change.
5. Add content overflow, Firefox, Chrome and IE get the actual content height, Opera compared to the top three browser to get a small height, Safari than the top three browsers get high.

3.offsetWidth and Offsetheight
This set of properties returns the actual size of the element, including the bounding rectangle, padding, and scroll bars.

//  $ //  $

PS: Returns the element size, the default unit is PX. If you do not set any CSS width and height, he will get the calculated widths and heights.
PS: For the actual size of the elements, offsetwidth and offsetheight understand as follows:
1. Increase the border, the final value will be equal to the original size plus the border size, 220;
2. Increase the inner margin, the final value will be equal to the original size plus the inner margin size, 220;
3. Increase the margin, without change;
4. Add scroll bar, no change, no decrease;
PS: For the acquisition of the element size, it is generally a block-level element and is more convenient to set the elements of the CSS size.

It is especially troublesome to have inline elements (inline) or elements that are not set in size, so it is recommended to use them.

Third, get the element perimeter size

1.clientLeft and ClientTop
This set of properties lets you get the size of the left and top borders of the element.

// get the length of the left border // gets the length of the top border

PS: Currently only provides left and top this group, and does not provide right and bottom.

If the width of the four edges is different, it can be obtained directly from the calculated style, or by subtracting the element size from the above three groups.

2.offsetLeft and offsettop
This set of properties can get the position of the current element relative to the parent element.

//  - //  -

PS: Gets the position of the element currently relative to the parent element, preferably set to locate Position:absolute, otherwise different browsers will have different interpretations.
PS: Adding a border and padding will not affect its position, but it will accumulate with the outside.

// Get parent element

In Ps:offsetparent, if the parent element itself is <body>, and non-IE returns the Body object, IE returns the HTML object. If two elements are nested, offsetparent returns a Body object or an HTML object if the parent element is not using the anchor position:absolute. So, when it comes to getting offsetleft and offsettop, CSS positioning is important.

Keep up backwards to get the summation to achieve

Box.offsettop + Box.offsetParent.offsetTop; Only two stories in the case

functionoffsetleft (Element) {varleft = Element.offsetleft;//get the first layer of distancevarparent = element.offsetparent;//get the first parent element while(Parent!==NULL) {//If there is a parent element in the previous layerLeft + = Parent.offsetleft;//add up the distance of this layerparent = parent.offsetparent;//get the parent element of this layer}//and then continue the loop .returnLeft ;}

3.scrollTop and ScrollLeft
This set of properties can get the size of the area to which the scrollbar is hidden, or it can be set to navigate to that area.

// get the position above the scrolling content // get the left position of scrolling content If you want the scroll bar to scroll to the initial position, you can write a function: function Scrollstart (Element) {if (element.scrolltop! = 0) element.scrolltop = 0;}

Add

Getboundingclientrect (). This method returns a rectangle object that contains four properties: Left, top, right, and bottom. Represents the distance between the edges of the element and the top and left sides of the page, respectively.

var // get Element // the distance from the top of the page to the top of the element // distance to the right of the element from the left side of the page // the distance from the top of the page below the element // Distance from left side of element to the left of the page

Ps:ie, firefox3+, Opera9.5, Chrome, Safari support, in IE, the default coordinates are calculated from (2,2), resulting in a final distance of two pixels more than other browsers, we need to do a compatibility.

Document.documentElement.clientTop;//non-IE is 0,ie for 2Document.documentElement.clientLeft;//non-IE is 0,ie for 2functionGetRect (Element) {varRect =Element.getboundingclientrect ();vartop =Document.documentElement.clientTop;varleft =Document.documentElement.clientLeft;return{top:rect.top-Top, Bottom:rect.bottom-Top, Left:rect.left-Left , Right:rect.right-Left }}

PS: Add the margin, padding, border, and scroll bars, respectively, to test whether all browsers are consistent.

DOM element size and position