But dom.style this writing can only access the <dom style= "" ></dom>, so that the built-in style in the tag, if the style is written in <style type= "Text/css" ></style , or. css file, then the way to read the style.
In fact, there are other ways to read these style information, there are two ways, one is through the Document.stylesheets object, the other is through the "final style" object. In IE, this object is called Currentstyle,ff, which is called Document.defaultview. I packed the two classes and made a function to access the style information as follows:
Copy Code code as follows:
=========================== Access style sheet functions ====================================
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 object to be accessed, the type is a DOM object, or the ID of the object;
StyleName: The name of the style that needs to be accessed. The type is string, but the name cannot use the "-" number, and the same case name as the property name of the style. Object, such as Background-color to write BackgroundColor.
The function return value is of type string.
Note: This method can only access the style file and cannot be written. If you want to write a style, still use the DOM.style.XXX method. In addition, there are some style access problems under FF, such as Padding,margin. If the Padding,margin equivalent is set in the style, we can use MarginLeft to return the value.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
#demo {background-color: #000;p adding:10px;color: #fff; width:200px;}
</style>
<script type= "Text/javascript" >
=========================== Access 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>
<body>
<div id= "Demo" > here is the test content </div>
<br/><br/>
<a href= "###" onclick= "Alert" (Returnstyle (' demo ', ' width ')); > Click Test </a>
</body>
===========================
Copy Code code as follows:
function GetStyle (elem, name) {
////If the property exists in style[], it has recently been set (and is the current)
if (Elem.style[name])
return elem.style[name];
//Otherwise, try IE way
else if (elem.currentstyle)
return elem.currentstyle[name];
//or the method of the Document.defaultView.getComputedStyle, if present
else if (Document.defaultview &&) {
//it uses Traditional "text-align" style of rule writing, rather than "textAlign"
name = Name.replace (/[A-z])/g, "-$1");
name = Name.tolowercase ();
//Get the Style object and get the value of the property (if present)
var s = document.defaultView.getComputedStyle (Elem, "");
return s && s.getpropertyvalue (name);
//Otherwise, the other browser is in use
else
return null;
}
