JavaScript reads and sets the style properties of document elements _javascript tips

First, let's talk about style sheet properties
1. Inline style, which is set in the element style attribute, has the highest level
2. Page style sheet definition that is defined in the page <style></style>, the second level
3. External link Style sheet file
JavaScript gets and sets the CSS properties of a document element:
1. Gets the style properties that are set in the element style property.
document.getElementById (ID). style.height;
If there is, return the value of the property;
IE and Firefox are all the same, just some property values returned may not be the same, such as the color Firefox return RGB, and IE is the return of hexadecimal digits
Test code:
<script type= "Text/javascript" >
function Getcss () {
Alert (document.getElementById ("AAA"). Style.height);
Alert (document.getElementById ("AAA"). Style.backgroundcolor);
Alert (document.getElementById ("AAA"). Style.width);
document.getElementById ("AAA"). Style.backgroundcolor = ' #dbdbdb ';
alert (mywidth);
}
</script>
<div id= "AAA" class= "BBB" style= "height:20px; Background-color: #FF0000; " >
Asdfasdfas
</div>
<input type= "button" value= "click" onclick= "Getcss ();"/>
2. Sometimes our style may have several places set up, we do not know whether it is the external style sheet properties of the work, or in the inline style works, so we need to get the current page rendering property values. This is somewhat different in IE and FF:
Sample code fragment:
IE:document.getElementById (' AAA '). Currentstyle.height
FF Standard: Document.defaultView.getComputedStyle (aaa,null). GetPropertyValue (' height ')
These two properties are read-only, and to change the style of an element, you have to use style, which is written directly in the element style attribute with the highest level of function
3. Write a function that is compatible with IE and FF to invoke

Copy Code code as follows:

function Getrealstyle (id,stylename) {
var element = document.getElementById (ID);
var realstyle = null;
if (Element.currentstyle)
Realstyle = Element.currentstyle[stylename];
else if (window.getComputedStyle)
Realstyle = window.getComputedStyle (Element,null) [stylename];
return realstyle;
}

Call: Cur_height = parseint (Getrealstyle (con_id, ' height '));
P.S: The return value usually comes with units, and you need to use the parseint function to extract the numbers to facilitate subsequent operations