Differences between style, currentstyle, and getcomputedstyle () in JS

Styles, currentstyles, and getcomputedstyle () in JS have three different styles: 1. Embedded styles (Inline style)-are written in tags. Embedded styles are only valid for all tags. 2. The internal style sheet is written in HTML. The internal style is only valid for the webpage. 3. External style sheet (if many web pages are used in the same style (styles.pdf), write the style (styles.pdf in a CSS file suffixed with .css, and then reference the CSS file on each page that requires these styles. Difference: 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. -Solution: Introduce currentstyle, runtimestyle, and getcomputedstyle standard styles! 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! Through currentstyle, you can get the CSS sample values that are referenced by inline or external reference (ie only), such as: document. getelementbyid ("test "). currentstyle. if top is compatible with FF, getcomputedstyle () is required. Note: getcomputedstyle () is in Firefox and currentstyle is in IE. for example: # mydiv {width: 300px;} Then: 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);} You can also get it in the following way under FF: document. defaultview. getcomputedstyle (mydiv, null ). width; window. getcomputedstyle (mydiv, null ). width;