JS getStyle gets the final style function code_javascript skills-JS Tutorial-php.cn

JS getStyle gets the final style function code_javascript skills

WBOY

Release： 2016-05-16 18:30:56

Original

916 people have browsed it

Copy code The code is as follows:

 
#flower { 
width:100px; 
font-size:12px; 
float:left; 
opacity:0.5; 
filter:alpha(opacity=50); 
} 

Define an id= "flower" div element and set the above style, our goal is to obtain the final attribute of the style through javascript

...

getStyle function:
Three prototype extensions are used here
String.prototype.capitalize This method makes the first letter of the string capitalized
Array.prototype.contains determines whether there are specified members in the array
String.prototype.camelize This is to convert the "font-size" string into "fontSize". This format is used to obtain the style

Copy code The code is as follows:

 
String.prototype.capitalize=function(){ 
return this.charAt(0).toUpperCase() this.substring(1).toLowerCase() ; 
} 
Array.prototype.contains=function(A){ 
return (this.indexOf(A) >= 0); 
} 
String.prototype.camelize=function (){ 
return this.replace(/-(w)/ig, 
function(B, A) { 
return A.toUpperCase(); 
}); 
} 
var css={ 
getStyle:function(elem,styles){ 
var value, 
elem=document.getElementById(elem); 
if(styles == "float"){ 
document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat'; 
} 
value=elem.style[styles] || elem.style[styles.camelize()] ; 
if(!value){ 
if (document.defaultView && document.defaultView.getComputedStyle) { 
var _css=document.defaultView.getComputedStyle(elem, null); 
value= _css ? _css.getPropertyValue(styles) : null; 
}else{ 
if (elem.currentStyle){ 
value = elem.currentStyle[styles.camelize()]; 
} 
} 
} 
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ 
value=elem[" offset" styles.capitalize()] "px"; 
} 
if(styles == "opacity"){ 
try { 
value = elem.filters['DXImageTransform.Microsoft.Alpha' ].opacity; 
value =value/100; 
}catch(e) { 
try { 
value = elem.filters('alpha').opacity; 
} catch(err ){} 
} 
} 
return value=="auto" ? null :value; 
} 
} 
css.getStyle("flower","width"); //100px; 
css.getStyle("flower","font-size");//12px; 
css.getStyle("flower","float");//left 
css. getStyle("flower","opacity");//0.5 

Let’s review the basics first
style Standard style! It may be specified by the style attribute!
runtimeStyle Runtime style! If it overlaps with the attributes of style, the attributes of style will be overwritten!
currentStyle refers to the combination of style and runtimeStyle!
style Inline style
currentStyle represents the object format and style specified in the global style sheet, inline style and HTML tag attributes
runtimeStyle represents the global style sheet, inline style and HTML tag The format and style of the object above the format and style specified by the attribute
(currentStyle and runtimeStyle are not available in FF)
getStyle (element id, get attribute);
Get the style in the element style tag
elem.style[styles] || elem.style[styles.camelize()]
Supports passing in "font-size"
But this is not the final style.
There are two ways to obtain the final style The final solution is
document.defaultView.getComputedStyle //w3c method
and the other is through elem.currentStyle["..."] //ie method
currentStyle method needs to bring "- "Character attributes need to be converted into IE-recognizable attributes through String.prototype.camelize

Copy code The code is as follows:

 
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ 
value=elem[" offset" styles.capitalize()] "px"; 
} 

When the width of an element defined in css is auto, the final width of the element cannot be obtained. We can use offsetWidth and offsetHeight to get the actual value
Of course, the premise is that the element is "visible"!

Copy the code The code is as follows :

 
try { 
value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; 
value =value/100; 
}catch(e) { 
try { 
value = elem.filters('alpha').opacity; 
} catch(err){} 
} 

This is how to get transparency , the definition of transparency in IE is different from that in other browsers. The opacity value obtained through the filter needs to be /100. Returns the standard opacity value (range 0-1);