Implementation Code for Retrieving Element width heights in various scenarios

Scenario 1: The width/height attribute of the element style is set Copy codeThe Code is as follows: <div style = "width: 100px;"> test <div>
<Script>
Var div = document. getElementsByTagName ('div ') [0];
Alert (div. style. width );
</Script>

As shown above, use el. style. width. If the width is not set in the style attribute, you cannot use el. style. width, as shown in the following figure.Copy codeThe Code is as follows: <div> test <div>
<Script>
Var div = document. getElementsByTagName ('div ') [0];
Alert (div. style. width );
</Script>

Empty strings are displayed in all browsers. Even if the style is embedded in the css of the page, it still cannot be obtained, as shown below:Copy codeThe Code is as follows: <style>
Div {width: 100px}
</Style>
<Div> test <div>
<Script>
Var div = document. getElementsByTagName ('div ') [0];
Alert (div. style. width );
</Script>

GetComputedStyle or currentStyle will be used in this case.
Scenario 2: The element sets the width/height by introducing a style sheet.
There are two ways to introduce a style sheet. One is to use the link tag to introduce a separate css file, and the other is to directly use the style tag on the html page. The second method is used for testing. As follows:Copy codeThe Code is as follows: <style>
Div {width: 100px}
</Style>
<Div> test <div>
<Script>
Function getStyle (el, name ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null );
} Else {
Return el. currentStyle;
}
}
Var div = document. getElementsByTagName ('div ') [0];
Alert (getStyle (div, 'width '));
</Script>

100px is displayed in all browsers. GetComputedStyle and currentStyle are used to obtain the width and height of the element defined in the style sheet.
If the element is not set in the style attribute or in the style table, can it be obtained using getComputedStyle or currentStyle? The answer is that getComputedStyle is acceptable, but currentStyle is not. As follows:Copy codeThe Code is as follows: <div> test <div>
<Script>
Function getStyle (el, name ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null );
} Else {
Return el. currentStyle;
}
}
Var div = document. getElementsByTagName ('div ') [0];
Alert (getStyle (div, 'width '));
</Script>

Div neither sets the style attribute nor introduces the style table. In Firefox/IE9/Safari/Chrome/Opera, you can obtain the width and height (default in the browser). However, IE6/7/8 does not work, and auto is returned.
Note that the getStyle method takes precedence over getComputedStyle, which is supported by IE9. Therefore, the width and height can be obtained in IE9. However, IE6/7/8 is not supported and can only be obtained using currentStyle.
Scenario 3: The element neither sets the style attribute nor introduces the style table.Copy codeThe Code is as follows: <div> test <div>
<Script>
Function getStyle (el, name ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null) [name];
} Else {
Return el. currentStyle [name];
}
}
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;
}
For (var I = 0, a; a = which [I ++];) {
Val-= parseFloat (getStyle (el, "border" + a + "Width") | 0;
Val-= parseFloat (getStyle (el, "padding" + a) | 0;
}
Return val + 'px ';
}
Var div = document. getElementsByTagName ('div ') [0];
Alert (getWH (div, 'width '));
</Script>

The idea is simple: Get the offsetWidth/offsetHeight of the element, minus the element padding and border.