In the past I have been rote to these attributes, rarely really understand, forget to look up the manual. After reading this article I believe this situation will not happen again.
dimensions of the physical space occupied by the element
If you need to get the physical space that the element occupies, use offsetheight and offsetwidth.
Naturally this physical space must include: padding, scroll bars, border. These two properties are consistent with the height and width properties of the Getboundingclientrect ().
To help understand, look at the following figure:
The dimensions of the viewable area of the element's content
The viewable area contains padding, but does not contain border, scroll bars. Please use clientheight and clientwidth at this time.
To help understand, look at the following figure:
dimensions of the entire contents of the element
If you want to get the real size of the element content, and of course it contains the invisible content, you need to use Scrollheight/scrollwidth.
For example, a 600*400 picture is contained within a 300*300, scrollable container element, so ScrollWidth will return 600, and ScrollHeight will return 400
Measured:
When an element has a scroll bar, the Chrome browser gets the scrollheight of the element sometimes inaccurate! But the example of this article is correct, do not know how to reproduce.
get the real dimensions of an element
In most scenarios, we don't care about the size of the entire content of the element (except for the window/document/body element), and the most commonly used is to get the physical space (offsetheight/offsetwidth) that the element occupies.
For example, to set a custom ToolTip for a piece of text, you need to get the height of the target element and then position the ToolTip.
Whether it's clientheight or offsetheight they all contain padding, assuming that this text contains 100px padding, the ToolTip position is obviously extremely inaccurate.
So getting the height of an element is usually a need to remove padding.
Because the style property of an element can only get width/height of inline styles, you need to use el.currentstyle.height/width in IE.
The standard browser uses window.getComputedStyle (el,null). Width/height.
Here's my friend Snandy. A user gets the true height and width of the element:
Copy Code code 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 a script library can often help us solve some of the thorny issues, and here's a look at jquery's related approach
Jquery.height ()/jquery.width ()
Returns an integer that is the height value of the first element in the set of matching jquery objects.
Note that this result does not concern the box model, and does not contain the padding of the element. This method is equivalent to Getwh (el, ' Height/width ')
This method also calculates the height of window and document.
Jquery.innerheight ()/jquery.innerwidth ()
Contrast jquery.height ()/jquery.width () This result contains padding, but does not contain border.
This method is equivalent to El.offsetheight/offsetwidth when element el is not set border
Jquery.outerheight ()/jquery.outerwidth ()
Contrast jquery.height ()/jquery.width () This result contains padding and border, and the default does not include margin.
This method is equivalent to El.offsetheight/offsetwidth when the element does not specify margin
You can pass in a bool variable to specify whether to include margin.
Attention:
Because the size of the entire contents of the normal element is not significant (except for some elements such as window, document, IFRAME, etc.),
So the three methods of jquery do not contain an invisible region.
Small test
Below is a div setting a height of 200px,padding for 3px,border 1px, inside the picture for 958*512
Have you guessed the value of the above?
Update
Also checked the next test code, scrollheight in Chrome under the inaccurate reason is the use of Jquery.ready (), and just test the element contains a picture inside.
As you know from the Jquery.ready (), the DOM tree is already loaded, but the picture element is not fully loaded, so chrome is handled in the right way.
So I tested it again on the example:
In IE 6/8 returned a result of 522/519
Chrome return result is 189
Firefox is a little special, constantly refreshing the page will have two results: 1 522;2) 189, but most of the situation is 522
This is certainly related to the implementation of the ready function of the jquery 1.6.2.
But judging from the above results, it is possible to infer that Jquery.ready () is the safest and fastest in chrome.
<textarea id="runcode51890"><div id= "D1" > </div> <div> <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 ($ (' #d1 '). Height ())" >jquery.height () </button> <button type= button "onclick=" Alert ($ (' # D1 '). Innerheight ()) ">jquery.innerheight () </button> <button type=" button "onclick=" Alert ($ (' #d1 '). Outerheight ()) ">jquery.outerheight () </button> </div></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Resources
Acquisition of element width by Snandy in each scenario
Determining the dimensions of elements
Measuring Element Dimension and Location with Cssom in Internet Explorer 9
