A handwritten javascript getStyle function that is compatible with various browsers gets the style of the element

  • 2020-03-30 03:14:14
  • OfStack


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


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 the method
var test = document.getElementById( 'test' ),
      //Gets the width of the calculation
    tWidth = getStyle( test, 'width' );

The new problem is that if em or % units are used for the width or height of the element, the value returned by getComputedStyle() will automatically change em or % to px units, and currentStyle will not, while if em is used for font-size, it will return 0em under Opera. Opera is really scary!

Later, there were some unexpected compatibility problems in the use discovery. Today, I optimized the original code and dealt with some common compatibility problems.


In javascript, the "-" (underscore or hyphen) is the minus sign, while in CSS, many style properties have this symbol, such as padding-left, font-size, etc., so in javascript, if the following code appears, it is an error:

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

The correct way to write it is:
elem.style.marginLeft = "20px";

Here you need to remove the line in the CSS and capitalize the letter immediately after the line, commonly known as "hump" writing, whether you use javascript to set or get the CSS style of the element should be written in a hump. However, many beginners who are familiar with CSS but not so familiar with javascript always make this simple mistake. The advanced use of replace makes it easy to replace the middle line in CSS properties with a hump.
var newProp = prop.replace( /-(w)/g, function( $, $1 ){
    return $1.toUpperCase();
});

For float, which is a reserved word in javascript, and for setting or getting the value of the element's float in javascript, there are other alternatives, cssFloat in standard browsers and styleFloat in ie6/7/8.

If there is no explicit value for top, right, bottom, or left, some browsers will return an auto when they fetch these values. Auto is a legitimate CSS property value, but it is not the desired result. Instead, it should be 0px.

Getting the width and height of the element in ie6/7/8 was covered in the previous article, and will not be repeated here. Another thing to note is that if the style of the element is written inline with style, or if the style of the element has been set with javascript, the following methods can be used to get the calculation style of the element:


var height = elem.style.height;

This method is faster than reading the property values in getComputedStyle or currentStyle and should be used first, provided that the style is set inline (which is also set inline using javascript Settings). The optimized final code is as follows:


var getStyle = function( elem, p ){
 var rPos = /^(left|right|top|bottom)$/,
 ecma = "getComputedStyle" in window,
 //Convert the center line to a hump: padding-left => paddingLeft
 p = p.replace( /-(w)/g, function( $, $1 ){
 return $1.toUpperCase();
 });
 //Processing float & NBSP;  
 p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

 return !!elem.style[p] ? 
 elem.style[p] : 
 ecma ?
 function(){
 var val = getComputedStyle( elem, null )[p];
 //Handle top, right, bottom, and left as auto
 if( rPos.test(p) && val === "auto" ){
 return "0px";
 }
 return val;
 }() :
 function(){
 var <a href="http://wirelesscasinogames.com">wirelesscasinogames.com</a> val = elem.currentStyle[p];
 //Gets the width and height of the element in ie6/7/8
  if( (p === "width" || p === "height") && val === "auto" ){
  var rect = elem.getBoundingClientRect();    
  return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
  }
 //Gets the transparency of the element in ie6/7/8
  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 top, right, bottom, and left as auto
  if( rPos.test(p) && val === "auto" ){
  return "0px";
  }
  return val;
 }();
};

Here's an example of the call:


<style>
.box{
 width:500px;
 height:200px;
 background:#000;
 filter:alpha(opacity=60);
 opacity:0.6;
}
</style>
<div id="box"></div>
<script>
var box = document.getElementById( "box" );
alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); // "none"
</script>


Related articles: