The usage and difference _javascript skills of the front-end learning notes Style,currentstyle,getcomputedstyle

Style, Currentstyle, getComputedStyle difference Introduction

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 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

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

The

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 addition, under the FF can also be obtained by the following way

Document.defaultView.getComputedStyle (mydiv,null). width;
window.getComputedStyle (mydiv, null). width;

Here are some additions:

When I read the blog, I saw this 3 guys-style,currentstyle,getcomputedstyle. Before the study of the time has not met, since now met, on a small study. Found a few problems, perhaps a long time, but also may be their own ignorance, but it really let me feel confused. Although Tao Yuanming said, reading superficial understanding, but as to want to become a good front-end front-end developers, or to get a clear, or sleep Ah!

Let's do a foreshadowing first. Say three different forms of cascading style sheets (three of different names, according to their own habits):

One. Inline style: Set in HTML tag with the Style property. Such as:

1 <p style= "color: #f90;" > This is inline style </p>

Two. Inline style: Through the

<style type= "Text/css" >
   /* This is the embedded style
   /* Stuff{color: #f90}
</style>

Three. External style: Set by <link> tab. Such as:

<link rel= "stylesheet" href= "Path/style.css" type= "Text/css" >
 ========================================= = =
 /* External style * * *
 @charset "UTF-8";
 Stuff{color: #f90;}

The

recommends a third way.
The following three protagonists have played.
The first one to come slowly to us is style. Its use is obj.style.attr; a film critic said in his blog:
Style can only get the inline style of an element, and the inner and outer styles cannot be obtained by using style. The
is validated with the following code, as mentioned above. I used three styles, and the result is the inline style value.

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  
 

External chain style sheet STYLE.CSS:

1 @charset "Utf-8"; 2/* CSS Document */3 #stuff {width:100px}

The result is 400px.

followed by the style is currentstyle, which is said to have a strong backing MS, which means that this guy can only be used in IE browser. The others don't. Its use is window.currentstyle["attr" or window.currentStyle.attr. The attribute value of the width in the inline style sheet in IE is 300px, which is not available in Mozilla Firefox.

The last person to come is getcomputedstyle, and its usage is window.getComputedStyle (ob, Pseudoelt) ["attr"] or window.getComputedStyle (ob, Pseudoelt). attr. Among them, Pseudoelt represents a pseudo class such as After,:before, which is set to null without pseudo class.

And the critic commented:

getComputedStyle works the same as Currentstyle, but it works for FF, Opera, Safari, and Chrome.

With a skeptical attitude, I verified again, and sure enough IE7,IE8,IE9 all the error:

Object does not support "getComputedStyle" property or method

compatibility issues with browsers. Browser compatibility issues are a real headache for the front-end developers, especially the culprit IE6. But we can not fear and far, but see the recruit, the soldiers will block Prito. You'll get a lot of pleasure in fighting it, and a sense of accomplishment after defeating it!!!

Another point: getComputedStyle and Currentstyle can only get property values and cannot set properties. If you want to set the property value, use Ob.style.attr.

There is a wrong place please everyone a lot of advice, here first thanked!!