In fact, there are other ways to read the style information. There are two methods, one is through the document. styleSheets object, and the other is through the "final style" object. In IE, this object is called currentStyle, and in FF, this object is called document. defaultView. I packed these two classes and made a function for accessing style information, as shown below:Copy codeThe Code is as follows: // ============================ access to the style sheet function ========== ==================================
Function returnStyle (obj, styleName ){
Var myObj = typeof obj = "string "? Document. getElementById (obj): obj;
If (document. all ){
Return eval ("myObj. currentStyle." + styleName );
} Else {
Return eval ("document. defaultView. getComputedStyle (myObj, null)." + styleName );
}
}
The function has two parameters:
Obj: The accessed object. Its type is DOM object or its id;
StyleName: name of the style to be accessed. The type is string, but the name cannot use the "-" number. The name must be written in case-insensitive format like the attribute name of style. Object. For example, background-color must be written as backgroundColor.
The Return Value of the function is of the string type.
Note: This method can only access style files and cannot be written. To write a style, use DOM. style. XXX. In addition, there are some style access problems in FF, such as padding and margin. If the padding and margin values are set in the style, we can use marginLeft to return values.Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
# Demo {background-color: #000; padding: 10px; color: # fff; width: 200px ;}
</Style>
<Script type = "text/javascript">
// ================================ Access to the style sheet ========== ======================================
Function returnStyle (obj, styleName ){
Var myObj = typeof obj = "string "? Document. getElementById (obj): obj;
If (document. all ){
Return eval ("myObj. currentStyle." + styleName );
} Else {
Return eval ("document. defaultView. getComputedStyle (myObj, null)." + styleName );
}
}
</Script>
<Title> </title>
</Head>
<Body>
<Div id = "demo"> here is the test content </div>
<Br/>
<A href = "###" onclick = "alert (returnStyle ('Demo', 'width');"> click to test </a>
</Body>
</Html>
======================================Copy codeThe Code is as follows: function getStyle (elem, name ){
// If this attribute exists in style [], it has been recently set (and is the current attribute)
If (elem. style [name])
Return elem. style [name];
// Otherwise, try IE
Else if (elem. currentStyle)
Return elem. currentStyle [name];
// Or W3C method. If so
Else if (document. defaultView & document. defaultView. getComputedStyle ){
// It uses the traditional "text-Align" style rule writing method, instead of "textAlign"
Name = name. replace (/([A-Z])/g, "-$1 ");
Name = name. toLowerCase ();
// Obtain the style object and obtain the attribute value (if any)
Var s = document. defaultView. getComputedStyle (elem ,"");
Return s & s. getPropertyValue (name );
// Otherwise, other browsers are used.
} Else
Return null;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
