Detailed explanation of correctly obtaining element style in js_javascript skills

Before talking about js getting the element style, let’s talk about the style briefly

There are three styles
External style External Style Sheet
File with CSS extension (also known as (a "Hypertext Style Sheet" file), its scope can be multiple web pages, or an entire website, or even different websites. It can only be applied after being linked to the web page.
Embedded style internal Style Sheet
Contains style settings inside the web page, and its scope is limited to the embedded web page.
Inline Style
In an HTML document, the formatting information of an inline style sheet is directly inserted into the HTML tag of the applied web page element as an attribute of its HTML tag. parameter. Strictly speaking, an inline style sheet is not a table, it is just an HTML tag.
When the same style appears, the priority is inline than embedded style, and embedded style is greater than external style.
-------------------------------------------------- ----------------
When js obtains these three styles, style can only obtain inline styles, but cannot obtain external styles and embedded styles, so currentStyle must be used attribute, and currentStyle is not supported under FF
The following introduces two methods that are compatible with FF and IE and correctly obtain the style

Copy code 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:

Copy the code The code is as follows:

HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});

Tell me about the usage of getComputedStyle function
This function has two parameters:
The first parameter is the element object whose style needs to be obtained;
The second parameter is the pseudo element, such as:hover, :first -letter, :before, etc.
If no pseudo-element is required, this parameter is null.
The getComputedStyle() function can be accessed from the document.defaultView object, that is, the function can be called like this
------------------------ -------------------------------------------------- ------------------

By the way, the runtimeStyle attribute, this attribute on the home page is only supported in IE, not supported in FF
runtimeStyle at runtime style! If it overlaps with the attributes of style, the attributes of style will be overwritten!
It means that when runtimeStyle is specified, the currently displayed style shall be based on runtimeStyle. If runtimeStyle is canceled, the current displayed style will be restored to the currentStyle style.
Case:
Set document.getElementById("eyejs").runtimeStyle.width="400px"; then the width of the element is 400px, which will override the style attribute
Case analysis package download