JavaScript obtains element size and size operation summary_javascript skills

1. Get the inline style of the element

Copy code The code is as follows:

var obj = document.getElementById("test");
alert(obj.height "n" obj.width);
// 200px 200px typeof=string just displays the value in the style attribute

2. Get the calculated style

Copy code The code is as follows:

var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
Style = window.getComputedStyle(obj, null); // Non-IE
} else {
Style = obj.currentStyle; // IE
}
alert("width=" style.width "nheight=" style.height);

Note: If the width and height of the element are not set, the default width and height will be returned in non-IE browsers. Return auto string

under IE

3. Get the styles written in the and

Copy code The code is as follows:

var obj = document.styleSheets[0]; // [object StyleSheetList] Number of style sheetsvar rule = null;// [object CSSRule]
if (obj.cssRules){
Rule = obj.cssRules[0]; // Non-IE [object CSSRuleList]
} else {
Rule = obj.rules[0]; // IE [object CSSRuleList]
}
alert(rule.style.width);

cssRules (or rules) can only obtain the width and height of inline and link styles, but cannot obtain inline and calculated styles.

Summary: The above three CSS methods of obtaining element size can only obtain the CSS size of the element, but cannot obtain the actual size of the element itself. For example, adding padding, scroll bars, borders, etc.

4. Get the actual size of the element

1. clientWidth and clientHeight
This set of attributes can get the size of the element's visible area, and the space occupied by the element's content and padding. The element size is returned, but there is no unit. The default unit is px. If you forcibly set the unit, such as 100em, it will still return the size of px. (If CSS is obtained, it will be obtained according to the style you set). For the actual size of the element, clientWidth and clientHeight are understood as follows:
a. Add border, no change;
b. Add margin, no change;
c. Increase the scroll bar, and the final value is equal to the original size minus the size of the scroll bar;
d. Increase the padding, the final value is equal to the original size plus the size of the padding;

Copy code The code is as follows:

#test{
background-color: green;
Width: 200px;
height: 200px;
Border: solid 5px red; /* Corresponds to a understanding, result: 200,200 */
Margin: 10px; /* Corresponds to b understanding, result: 200,200*/
Padding: 20px; /* Corresponds to c understanding, result: 240,240*/
Overflow: scroll; /* Corresponding to d understanding, the result is: 223, 223, 223=200 (css size) 40 (padding on both sides) - 17 (scroll bar width) */
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientWidth "," obj.clientHeight);
};

Note: If no CSS width and height are set, non-IE browsers will include the calculated size of the scroll bar and padding, while IE browsers will return 0 (fixed in IE8).

2. scrollWidth and scrollHeight
This set of properties can get the element size of scrolling content (visible content). Returns the element size, the default unit is px. If you don't set any CSS width and height, it will get the calculated width and height. For the actual size of the element, scrollWidth and scrollHeight are understood as follows:
1. Add borders, different browsers have different interpretations (the following works normally in IE8, but not in IE6):
a) Firefox and Opera browsers will increase the size of the border, 220x220
b) IE, Chrome and Safari browsers will ignore the border size, 200x200
c) IE browser only displays the height of its original content, 200x18 (IE8 has corrected this problem)
2. Add padding, the final value will be equal to the original size plus padding size, 220x220, IE is 220x38
3. Add a scroll bar, the final value will be equal to the original size minus the scroll bar size, 184x184, IE is 184x18
4. Added external border strongholds, no change.
5. Increase content overflow. Firefox, Chrome and IE obtain the actual content height. Opera obtains a smaller height than the first three browsers, and Safari obtains a larger height than the first three browsers.

3. offsetWidth and offsetHeight
This set of properties can return the actual size of the element, including borders, padding and scroll bars. Returns the element size, the default unit is px. If you don't set any CSS width and height, it will get the calculated width and height. For the actual size of the element, offsetWidth and offsetHeight are understood as follows:
1. Add a border, the final value will be equal to the original size plus the border size, which is 220;
2. Increase the padding, the final value will be equal to the original size plus the padding size, which is 220;
3. Added external border strongholds, no change;
4. Add scroll bar, no change, no decrease;
For obtaining the element size, it is generally more convenient to use block-level elements and elements with CSS sizes set. It is particularly troublesome if it is an inline element (inline) or an element with no set size, so it is recommended to pay attention when using it.

Copy code The code is as follows:

test div element

#test{
background-color: green;
Width: 200px;
height: 200px;
Border: solid 10px red; /*Result: 220,220*/
Margin: 10px; /*Result: 220,220 (no change)*/
Padding: 10px; /*Result: 240,240*/
Overflow: scroll; /*Result: 240,240 (no change)*/
}
window.onload = function(){
var obj = document.getElementById("test");
​​ alert(obj.offsetWidth "," obj.offsetHeight);
};

5. Get the surrounding size of the element
1. clientLeft and clientTop get the border size
This set of attributes can get the size of the left border and top border set by the element. Currently, only the Left and Top groups are provided, and Right and Bottom are not provided. If the width of the four sides is different, it can be obtained directly through the calculated style, or by subtraction of the above three groups to obtain the element size.
The width of the right border: obj.offsetWidth-obj.clientWidth-obj.clientLeft
Bottom border width: obj.offsetHeight-obj.clientHeight-obj.clientTop

Copy code The code is as follows:

test div element

#test{
background-color: green;
Width: 200px;
height: 200px;
Border-top: solid 10px red;s
Border-right: solid 20px #00ff00;
Border-bottom: solid 30px blue;
Border-left: solid 40px #808080;
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientLeft "," obj.clientTop); // 40,10
};

2. offsetLeft and offsetTop
This set of attributes can obtain the position of the current element relative to the parent element. To get the current position of an element relative to its parent element, it is best to set it to position:absolute; otherwise different browsers will have different interpretations.
a. Set position to absolute, and all browsers will return the same value. Such as:

Copy code The code is as follows:

test div element

#test{
background-color: green;
Width: 200px;
height: 200px;
Position: absolute;
Left: 30px;
top: 20px;
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.offsetLeft "," obj.offsetTop); // 30, 20
};

b. Adding borders and padding will not affect its position, but adding outer padding will add up.

3. box.offsetParent gets the parent element
In offsetParent, if the parent element is

, non-IE will return the body object, and IE (IE6) will return the html object. If two elements are nested, if the upper parent element does not use position:absolute, then offsetParent will return the body object or html object. Therefore, CSS positioning is very important when obtaining offsetLeft and offsetTop.
If, in many layers, the outer layer has been positioned, how do we get the distance between the inner layer elements and the body or html elements? That is, get the position of any element on the page. Then we can write a function to achieve accumulation by continuously backtracking upwards.

Copy code The code is as follows:

box.offsetTop box.offsetParent.offsetTop; // When there are only two layers

function offsetLeft(element){
var left = element.offsetLeft; // Get the first layer distance
var parent = element.offsetParent; // Get the first parent element
While (parent !== null) { // If there is a previous parent element
           left = parent.offsetLeft; // Accumulate the distance of this layer
         parent = parent.offsetParent; // Get the parent element of this layer
} //Then continue the loop
Return left;
}

4.scrollTop and scrollLeft
This set of attributes can obtain the size of the area where the scroll bar is hidden (the area above the scroll bar), and can also be set to locate this area. If you want the scroll bar to scroll to the initial position, you can write a function:

Copy code The code is as follows:

function scrollStart (element) {
If ( element.scrollTop != 0 ) {
          element.scrollTop = 0;
}
}

5. getBoundingClientRect()
This method returns a rectangle object containing four properties: left, top, right and bottom. Represents the distance between each side of the element and the top and left sides of the page respectively.

Copy code The code is as follows:

var box=document.getElementById('box'); // Get element
alert(box.getBoundingClientRect().top); // The distance between the top of the element and the top of the page
alert(box.getBoundingClientRect().right); //The distance between the right side of the element and the left side of the page
alert(box.getBoundingClientRect().bottom); //The distance between the bottom of the element and the top of the page
alert(box.getBoundingClientRect().left); //The distance between the left side of the element and the left side of the page

Note: IE, Firefox3, Opera9.5, Chrome, and Safari are supported. In IE, the default coordinates are calculated from (2,2), resulting in the final distance being two pixels more than other browsers. We need to make a compatible.

Copy code The code is as follows:

document.documentElement.clientTop; //Non-IE is 0, IE is 2
document.documentElement.clientLeft; //Non-IE is 0, IE is 2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
Return{
TOP: RECT.TOP -TOP,
bottom : rect.bottom - top,
                                                                                                                                                        left Right : rect.right - left
}
}

Add outer margins, inner margins, borders and scroll bars respectively to test whether all browsers are consistent.

The above is all the content described in this article, I hope you guys will like it.