A handwritten javascript getStyle function compatible with various browsers (getting the style of an element)_javascript skills

There have always been many compatibility issues in getting the calculated style of HTML elements. There are some differences in each browser. Firefox and webkit (Chrome, Safari) support the W3C standard method: getComputedStyle(), while IE6/7/ 8 does not support the standard method but has private properties to implement it: currentStyle, both IE9 and Opera support it. With these two methods and attributes, most requirements can basically be met.

Copy code The code is as follows:

var getStyle = function( elem, type ){
return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

But for adaptive width and height, you cannot get the calculated value using currentStyle. You can only return auto, and getComputedStyle() can return the calculated value. There are several ways to solve this problem. What I thought of before was to subtract the padding value from clientWidth/clientHeight, so that the calculated width and height can be obtained in browsers that do not support the standard method. A few days ago, I saw that Situ Zhengmei used another method, using the getBoundingClientRect() method to get the position of the element on the page, and then subtracting right from left is the width, and bottom minus top is the height. I made some small modifications to his code, and the final code is as follows:

Copy code The code is as follows:

var getStyle = function( elem, style ){
return 'getComputedStyle' in window ?
getComputedStyle( elem, null )[style] :
function(){
style = style.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

var val = elem.currentStyle[style];

if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "width" ){
return rect.right - rect.left 'px';
}else{
return rect.bottom - rect.top 'px';
}
}
return val;
}();
};

// Call this method
var test = document.getElementById( 'test' ),
// Get the calculated width
tWidth = getStyle( test, 'width' );

New question, if the width or height of the element uses em or % units, the value returned by getComputedStyle() will automatically change em or % into px units, but currentStyle will not, and if it is font- size uses em as the unit, and returns 0em under Opera. Opera is really scary!

Later, I found some unexpected compatibility issues during use. Today I optimized the original code and dealt with some common compatibility issues.

In JavaScript, "-" (dash or hyphen) represents a minus sign, and in CSS, many style attributes have this symbol, such as padding-left, font-size, etc., so If the following code appears in javascript, it is an error:

Copy the code The code is as follows:

elem.style .margin-left = "20px";

The correct writing should be:

Copy code The code is as follows:

elem.style.marginLeft = "20px";

Here you need to remove the underline in CSS and capitalize the letters immediately following the underline, commonly known as "camel case" The writing method, whether you use javascript to set or get the CSS style of the element, should be written in camel case. However, many novice friends who are familiar with CSS but not familiar with javascript will always make this low-level mistake. Using the advanced usage of replace can easily replace the underscore in the CSS attribute with camel case writing.

Copy code The code is as follows:

var newProp = prop.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

For float, it is a reserved word in JavaScript. There are other alternative ways to set or get the float value of an element in JavaScript. In standard browsers, it is cssFloat, and in IE6/7/8, it is styleFloat. .

If top, right, bottom, and left do not have an explicit value, some browsers will return an auto when obtaining these values. Although the auto value is a legal CSS attribute value, it is by no means what we want. The result should be 0px.

To set the transparency of elements in IE6/7/8, you need to use filters, such as: filter:alpha(opacity=60). For standard browsers, just set opacity directly. IE9 supports both writing methods. I Compatibility has also been implemented for obtaining the transparency of elements. As long as you use opacity, you can obtain the transparency values ​​​​of all browser elements.

Getting the width and height of elements in IE6/7/8 has been introduced in the previous article, so I won’t repeat it here. Another thing to note is that if the style of the element is written using style inline, or the style attribute has been set using JavaScript, you can use the following method to get the calculated style of the element:

Copy code The code is as follows:

var height = elem.style.height;

This method is faster than reading the attribute value in getComputedStyle or currentStyle, and should be used first. Of course, the prerequisite is that the style is set by inline writing (using javascript to set the inline style is also set). The optimized final code is as follows:

Copy code The code is as follows:

var getStyle = function( elem, p ){
var rPos = /^(left|right|top|bottom)$/,
ecma = "getComputedStyle" in window,
// Convert the underscore to camel case such as: padding-left => paddingLeft
p = p.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// Process float
p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

return !!elem.style[p] ?
elem.style[ p] :
ecma ?
function(){
var val = getComputedStyle( elem, null )[p];
// Handle the case where top, right, bottom and left are auto
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
function() {
var wirelesscasinogames.com val = elem.currentStyle[p];
// Get elements in IE6/7/8 The width and height in
if( (p === "width" || p === "height") && val === "auto" ){
var rect = elem.getBoundingClientRect();
return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
}
// Get elements in IE6/7/8 Transparency in
if( p === "opacity" ){
var filter = elem.currentStyle.filter;
if( /opacity/.test(filter) ){
val = filter .match( /d / )[0] / 100;
return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
}
else if( val === undefined ){
return "1";
}
}
// Handle the case where top, right, bottom and left are auto
if ( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};

The following is an example call:

Copy code The code is as follows: