When you use JavaScript scripts to obtain the size of an element, you need to understand several attributes. Otherwise, it will be tricky. In the past, I have memorized these attributes and seldom really understood them. If I forget it, I will check the manual. After reading this article, I believe this will not happen again.
Physical space occupied by elements
If you need to obtain the physical space occupied by the element, use offsetHeight and offsetWidth.
Naturally, this physical space must include padding, scroll bar, and border. The two attributes are consistent with the height and width attributes of getBoundingClientRect.
For help, see:
The size of the visible area of the element content
The visible area contains padding, but does not contain border and scroll bars. Use clientHeight and clientWidth.
For help, see:
Size of all elements
If you want to get the true size of the element content, and of course contain the invisible content, you need to use scrollHeight/scrollWidth.
For example, if a 600*400 image is contained in a 300*300 scrolling container element, scrollWidth returns 600, and scrollHeight returns 400.
Test:
When an element has a scroll bar, it is sometimes inaccurate for chrome to obtain the scrollHeight of the element! However, the example in this article is correct and I don't know how to reproduce it.
Obtains the true size of an element.
In most scenarios, we do not care about the size of all the elements (except for window/document/body elements). The most common practice is to obtain the physical space occupied by elements (offsetHeight/offsetWidth ).
For example, to set a custom tooltip for a text segment, You need to obtain the height of the target element and then locate the tooltip.
Both clientHeight and offsetHeight contain padding. If the text contains PX padding, the position of this tooltip is obviously extremely inaccurate.
Therefore, to obtain the height of an element, we usually need to remove the padding.
Because the style attribute of an element can only obtain the width/height of an inline style, el. currentStyle. height/width must be used in IE,
The standard browser uses window. getComputedStyle (el, null). width/height.
The following is a method for the Snandy user of my school friend to obtain the true height and width of elements:
The Code is as follows:
Function getStyle (el ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null );
} Else {
Return el. currentStyle;
}
}
Function getWH (el, name ){
Var val = name = "width "? El. offsetWidth: el. offsetHeight,
Which = name = "width "? ['Left', 'right']: ['top', 'bottom'];
// Display is none
If (val = 0 ){
Return 0;
}
Var style = getStyle (el );
For (var I = 0, a; a = which [I ++];) {
Val-= parseFloat (style ["border" + a + "Width"]) | 0;
Val-= parseFloat (style ["padding" + a]) | 0;
}
Return val;
}
Using the script library can often help us solve some difficult problems. Let's take a look at jQuery's related methods.
JQuery. height ()/jQuery. width ()
Returns an integer that is the height of the first element in the matching jQuery object set.
Note that this result does not care about the box model and does not contain the padding of the element. This method is equivalent to getWH (el, 'height/width ')
This method can also calculate the height of the window and document.
JQuery. innerHeight ()/jQuery. innerWidth ()
Compare jQuery. height ()/jQuery. width (). This result contains padding, but does not contain border.
This method is equivalent to el. offsetHeight/offsetWidth when border is not set for element el.
JQuery. outerHeight ()/jQuery. outerWidth ()
Compare jQuery. height ()/jQuery. width (). This result contains padding and border, and margin is not included by default.
When margin is not specified for an element, this method is equivalent to el. offsetHeight/offsetWidth.
You can input a bool variable to specify whether to include margin.
Note:
It is of little significance to obtain the size of all the content of a common element (except for some elements such as window, document, iframe, etc ),
Therefore, none of jQuery's three methods contain invisible regions.
Small Test
Below is a p set with a height of 958 PX, padding is 3px, border is 1px, and the image inside is 512 *
Have you guessed all the values above?
Update
Check the test code again. The reason why scrollHeight is inaccurate in chrome is that jQuery. ready () is used, and the elements that are just tested contain an image.
Anyone who has used jQuery. ready () knows that the DOM tree has been loaded, but the image elements have not been fully loaded. Therefore, the chrome processing method is correct.
So I tested it again in the previous example:
In IE 6/8, the returned result is 522/519.
Chrome returns 189
Firefox is a little special. There are two results for refreshing the page: 1) 522; 2) 189, but in most cases it is 522.
This situation must be related to the implementation of the ready function of jQuery 1.6.2.
However, the above results show whether jQuery. ready () is the safest and fastest in chrome.
<P style = "padding: 3px; border: 1px solid #000; height: 200px; overflow: scroll; "id =" d1 "> </p> <button type =" button "onclick =" alert (document. getElementById ('d1 '). clientHeight) "> clientHeight </button> <button type =" button "onclick =" alert (document. getElementById ('d1 '). offsetHeight) "> offsetHeight </button> <button type =" button "onclick =" alert (document. getElementById ('d1 '). scrollHeight) "> scrollHeight </button> <button type =" button "onclick =" alert ($ ('#1 '). height () "> jQuery. height () </button> <button type = "button" onclick = "alert ($ ('# d1 '). innerHeight () "> jQuery. innerHeight () </button> <button type = "button" onclick = "alert ($ ('# d1 '). outerHeight () "> jQuery. outerHeight () </button> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
References
Acquisition of element width height in various scenarios by Snandy
Determining the dimensions of elements
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
