As we all know, document. getelementbyid ('element '). style. xxx can obtain the style information of an element, but it only obtains the style rules in the DOM element style attribute. For external style tables referenced by the class attribute, we cannot get the information we need.
In the DOM standard, there is a global method getcomputedstyle, which can get the information of the current object style rules, such as getcomputedstyle (OBJ, null). paddingleft to get the left padding of the object. However, this method is not complete yet. The evil IE does not support this method. It has its own implementation method, namely currentstyle. Unlike the global method getcomputedstyle, it exists as a DOM element attribute, for example, obj. currentstyle. paddingleft: The left padding of the object is obtained in IE. The Compatibility Statement is as follows:
The Code is as follows:
Return window. getcomputedstyle? Window. getcomputedstyle (OBJ, null). paddingleft: obj. currentstyle. paddingleft;
In this way, the current style information of the object can be returned in IE and ff.
Note: To obtain the color information of the current object, ie returns the hexadecimal '# ffff', and FF returns the RGB (255,255,255)
You can use the style attribute of js to obtain the HTML Tag style, but cannot obtain the non-interline style. So how can I use js to obtain the CSS non-interline style? Currentstyle can be used in IE, while getcomputedstyle is required in Firefox. Below is a small example:
The Code is as follows:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JS uses currentstyle and getcomputedstyle to obtain CSS styles </title>
<Style type = "text/CSS">
# Div1 {width: 100px; Height: 100px; Background: red ;}
</Style>
<SCRIPT type = "text/JavaScript">
Function getstyle (OBJ, ATTR)
{
If (obj. currentstyle)
{
Return obj. currentstyle [ATTR];
}
Else
{
Return getcomputedstyle (OBJ, false) [ATTR];
}
}
Window. onload = function ()
{
VaR odiv = Document. getelementbyid ('div1 ');
Alert (getstyle (odiv, 'width '))
}
</SCRIPT>
</Head>
<Body>
<Div id = "div1"> </div>
</Body>
</Html>
2. Read styles other than inline (differences between style, currentstyle, and getcomputedstyle)The most commonly used is the style attribute. In JavaScript, the document. getelementbyid (ID ). style. xxx can get the value of XXX, but unexpectedly, only the style value set in the embedded mode can be obtained, that is, the value set in the style attribute.
Style sheets can be created in three ways:
Inline style: it is written in the tag. The embedded style is only valid for all tags.
Internal style sheet: it is written in the HTML External style sheet: if many web pages are used in the same style (styles), write the style (styles(in a CSS file suffixed with .css, and then reference the CSS file on each page that requires these styles.
The following is a javascript code that reads styles other than embedded styles. It can only be read and cannot be written.
Copy the Code as follows:
VaR mydiv = Document. getelementbyid ('mydiv ');
If (mydiv. currentstyle ){
VaR width = mydiv. currentstyle ['width'];
Alert ('ie: '+ width );
} Else if (window. getcomputedstyle ){
VaR width = Window. getcomputedstyle (mydiv, null) ['width']
Alert ('Firefox: '+ width );
}
In addition, you can use the following method to obtain
Document. defaultview. getcomputedstyle (mydiv, null). Width
Window. getcomputedstyle (mydiv, null ). width is the most commonly used style attribute. In JavaScript. getelementbyid (ID ). style. xxx can get the value of XXX, but unexpectedly, only the style value set in the embedded mode can be obtained, that is, the value set in the style attribute.
Solution: Introduce currentstyle, runtimestyle, getcomputedstyle
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!
You can use currentstyle to obtain the CSS style value that is referenced by inline or external reference (ie only)
For example, document. getelementbyid ("test"). currentstyle. Top
To be compatible with FF, getcomputedstyle is required.
Note: getcomputedstyle is in Firefox,
Currentstyle is in IE.
For example
Copy the Code as follows:
<Style>
# Mydiv {
Width: 300px;
}
</Style>
Then:
Copy the Code as follows:
VaR mydiv = Document. getelementbyid ('mydiv ');
If (mydiv. currentstyle ){
VaR width = mydiv. currentstyle ['width'];
Alert ('ie: '+ width );
} Else if (window. getcomputedstyle ){
VaR width = Window. getcomputedstyle (mydiv, null) ['width'];
Alert ('Firefox: '+ width );
}
In addition, you can use the following method to obtain
Copy the Code as follows:
Document. defaultview. getcomputedstyle (mydiv, null). Width
Window. getcomputedstyle (mydiv, null). Width
Differences between methods for Retrieving Element style information from section 3
