Copy Code code as follows:
#flower {
width:100px;
font-size:12px;
Float:left;
opacity:0.5;
Filter:alpha (OPACITY=50);
}
Define a id= "flower" div element and set the style as above, 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 capitalize the first letter of the string
Array.prototype.contains determine if there are specified members in the array
String.prototype.camelize This is a format that lets the "Font-size" string be converted to "fontsize" to get the style
Copy Code code 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;
The 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
Review the Basics first
Style Standard styles! May be specified by the Style property!
Runtimestyle style at run time! If you overlap the properties of the style, the properties of the style are overwritten!
Currentstyle refers to the combination of style and Runtimestyle!
Style inline styles
Currentstyle represents the object formatting and styles specified in the global style sheet, inline styles, and HTML tag properties
Runtimestyle represents the format and style of objects that are above the formatting and styles specified by the global style sheet, inline styles, and HTML tag attributes
(No Currentstyle and Runtimestyle in FF)
GetStyle (element ID, get attribute);
Get the style within the element style label
Elem.style[styles] | | Elem.style[styles.camelize ()]
Support the introduction of "Font-size"
But this is not the final style.
There are two final ways to get the final style.
The method of Document.defaultView.getComputedStyle//W3C
There is the method of//ie by elem.currentstyle["..."]
The Currentstyle method requires that attributes with "-" characters need to be converted to IE-identifiable properties by String.prototype.camelize
Copy Code code as follows:
if (value== "Auto" && ["width", "height"].contains (styles) && elem.style.display!= "None") {
value=elem["offset" +styles.capitalize ()]+ "px";
}
When the width of the element in the CSS is auto, and you can't get the final width of the element, we can get the actual value with Offsetwidth and offsetheight.
Of course, the premise is to be in the element is "visible" state!
Copy Code code as follows:
try {
Value = elem.filters[' DXImageTransform.Microsoft.Alpha '].opacity;
Value =value/100;
}catch (e) {
try {
Value = elem.filters (' alpha '). Opacity;
The catch (err) {}
}
This is the way to get transparency, and the definition of transparency in IE is different from that of other browsers. The Opacity value/100 obtained through the filter is required. Returns the standard opacity value (range 0-1);
