Implementation Code _ javascript

For the sake of simplicity, we only use the width example here. Get the offsetWidthoffsetHeight of the element, minus the padding and border of the element. Scenario 1: The width/height attribute of the element style is set

The Code is as follows:

Test

Script
Var p = document. getElementsByTagName ('P') [0];
Alert (p. 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.

The Code is as follows:

Test

Script
Var p = document. getElementsByTagName ('P') [0];
Alert (p. 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:

The Code is as follows:

Test

Script
Var p = document. getElementsByTagName ('P') [0];
Alert (p. 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:

The Code is as follows:

Test

Script
Function getStyle (el, name ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null );
} Else {
Return el. currentStyle;
}
}
Var p = document. getElementsByTagName ('P') [0];
Alert (getStyle (p, '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:

The Code is as follows:

Test

Script
Function getStyle (el, name ){
If (window. getComputedStyle ){
Return window. getComputedStyle (el, null );
} Else {
Return el. currentStyle;
}
}
Var p = document. getElementsByTagName ('P') [0];
Alert (getStyle (p, 'width '));
Script

P neither sets the style attribute nor introduces the style sheet. 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.

The Code is as follows:

Test

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 p = document. getElementsByTagName ('P') [0];
Alert (getWH (p, 'width '));
Script

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