When js obtains these three styles, the style can only obtain inline styles, but cannot obtain external styles and embedded styles. Therefore, the currentStyle attribute must be used, currentStyle does not support getting element styles in js in FF.
There are three styles
External Style Sheet
A file with a CSS extension (also known as a "hypertext style sheet" file) can be used on multiple webpages, the entire website, or even different websites. You can only apply the application after you connect to the web page.
Embedded Style internal Style Sheet
The style settings that are included in the web page are limited to embedded web pages.
Inline Style
In an HTML document, the formatting information of an inline style table is directly inserted into the HTML tag of the webpage element applied as the attribute parameter of the HTML Tag. Strictly speaking, inline style sheets are not just an HTML Tag.
When the same style appears, the priority is that the inline style is greater than the embedded style, and the embedded style is greater than the external style.
---------------------------------------------------------------
When js obtains these three styles, the style can only obtain inline styles, but cannot obtain external styles and embedded styles. Therefore, the currentStyle attribute must be used, whereas currentStyle is not supported in FF.
The following describes two methods compatible with FF and IE and correct style acquisition.
The Code is as follows:
Var $ = function (id) {return document. getElementById (id )};
Method 1
/*
* @ String id
* @ String styleName style name
*/
Function getEyeJsStyle (id, styleName ){
If ($ (id). currentStyle) {// ie
Return $ (id). currentStyle [styleName];
} Else {// ff
Var $ arr = $ (id). ownerDocument. defaultView. getComputedStyle ($ (id), null );
Return $ arr [styleName];
}
}
Method 2:
The Code is as follows:
HTMLElement. prototype. _ defineGetter _ ("currentStyle", function (){
Return this. ownerDocument. defaultView. getComputedStyle (this, null );
});
Describes the usage of the getComputedStyle function.
This function has two parameters:
The first parameter is the element object for obtaining the style;
The second parameter is a pseudo element, such as hover, first-letter, and before,
If no pseudo element is required, this parameter is null.
The getComputedStyle () function can be accessed from the document. defaultView object.
Bytes --------------------------------------------------------------------------------------------
By the way, the runtimeStyle attribute is only supported in IE and not in FF.
RuntimeStyle runtime style! If it overlaps with the style attribute, it overwrites the style attribute!
This means that if runtimeStyle is specified, the currently displayed style is subject to runtimeStyle. If runtimeStyle is canceled, the current display style is restored to currentStyle.
Case:
Set document. getElementById ("eyejs"). runtimeStyle. width = "400px"; the width of this element is 400px, which overwrites the attribute of the style.
Case Analysis Package and download
