JS Gets the property style of the DOM element __JS

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 inside the HTML, the internal style is only valid for the Web page in which it is located.

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 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 the style of the Currentstyle,runtimestyle,getcomputedstyle style standard, which may be specified by the Style property.

Runtimestyle the 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. By Currentstyle, you can obtain values for CSS styles that are inline or externally referenced (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

1 2 3 4 5

<style> #mydiv {width:300px;} </style>

The

1 2 3 4 5 6 7 8

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 short, JS gets the style values of the elements, compatible with multiple browsers, can be obtained as follows: