JS getstyle get final Style Function Code

CopyCode The Code is as follows: # flower {
Width: 100px;
Font-size: 12px;
Float: left;
Opacity: 0.5;
Filter: alpha (opacity = 50 );
}

Define a div element with ID = "Flower" and set the above style. Our goal is to get the final attribute of the style through JavaScript.
<Div id = "Flower">... </div>
Getstyle function:
Three prototype extensions are used here.
String. Prototype. capitalize this method is to make the first letter of the string uppercase
Array. Prototype. Contains: determines whether a specified member exists in the array.
String. Prototype. camelize, which converts a "font-size" string to a format like "fontsize" to obtain a 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 (){
Return (this. indexof (a)> = 0 );
}
String. Prototype. camelize = function (){
Return this. Replace (/\-(\ W)/ig,
Function (B, ){
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

first, review the basics
style standard style! It may be specified by the style attribute!
runtimestyle runtime style! If it overlaps with the style attribute, it overwrites the style attribute!
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, embedded style, and HTML Tag attribute
runtimestyle represents the global style formats and styles of objects on the specified formats and styles of tables, embedded styles, and HTML tag attributes
(currentstyle and runtimestyle are not included in ff)
getstyle (element ID, get attribute);
get the style in the element style label
ELEM. style [styles] | ELEM. style [styles. camelize ()]
supports writing "font-size"
but this is not the final style.
There are two final methods to obtain the final style:
document. defaultview. the getcomputedstyle // W3C method
also uses ELEM. Currentstyle ["... "] // method under ie
the currentstyle method requires that the attribute with the"-"character be passed string. prototype. convert camstme to an attribute that can be recognized by IE 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 obtain the actual value.
Of course, the premise is that the element must be "visible!Copy codeThe 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 the method for obtaining transparency. The definition of transparency in IE is different from that in other browsers. You need to set the opacity value/100 obtained through the filter. Returns the standard opacity value (range: 0-1 );