There are three ways to style sheets
inline style (inline style): It is written in tag, the inline style is only valid for all tags.
Internal style (internal style Sheet): is written in HTML External style sheet (External style Sheet): If many pages need to use the same style (Styles), write the style (Styles) in a CSS file with a. css suffix, and then use these styles for each (Styles) Page to refer to this CSS file.
The following is the reading of JS except the inline style, which can only be read and not written.
Copy Code 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, under the FF can also be obtained by the following way
Document.defaultView.getComputedStyle (mydiv,null). Width
window.getComputedStyle (mydiv, null). Width
<textarea id="runcode82734"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>Document</title> <style> #test {width:200px;} </style> <script> </script> </pead> <body> <div id= "test" >this is Test content< ;/div> <script type= "Text/javascript" > var otest = document.getElementById (' test '); OTest.style.width = 400+ ' px '; if (otest.currentstyle) {alert (' ie: ' + otest.currentstyle[' width ')]; else {alert (' FF: ' + window.getcomputedstyle (otest, null) [' width ']); } </script> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The most commonly used is the style property, in JavaScript, through the document.getElementById (ID). style. XXX can get the value of XXX, but unexpectedly, it can only take the style value set inline, that is, the value set in the Style property.
Solution: Introduce Currentstyle,runtimestyle,getcomputedstyle
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!
The value of CSS styles via inline or external references can be obtained via currentstyle (ie only)
such as: document.getElementById ("Test"). Currentstyle.top
To be compatible with FF, you need to getcomputedstyle.
Note: getComputedStyle is in Firefox,
Currentstyle is in IE.
For example
Copy Code code as follows:
<style>
#mydiv {
width:300px;
}
</style>
The
Copy Code 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, under the FF can also be obtained by the following way
Copy Code code as follows:
Document.defaultView.getComputedStyle (mydiv,null). Width
window.getComputedStyle (mydiv, null). Width
