Summary of ways to get styles using native JavaScript

Source: http://www.ido321.com/930.html

PS: is the get style. Not set style. If no style value is set for the element. Returns the default value given by the browser. (Forum finishing)

1, Element.style: Only can get the style value that is written in the element tag, cannot get to the definition in <style></style> and through <link href= "Css.css" > Style properties Loaded in

 1:  var  ele = document.getElementById ( ' ele ' );  

   2:  ele.style.color;    Get Color

2, window.getComputedStyle (): Ability to get all the CSS property values that are finally used by the current element.

   1:  window.getcomputedstyle ("element""Pseudo-Class");

This method accepts two parameters: to get the element of the calculated style and a pseudo-element string (such as ": Before").

Assuming that no pseudo-element information is required, the second parameter can be null.

can also be used by Document.defaultView.getComputedStyle ("element", "Pseudo-class");

 1:  var  ele = document.getElementById ( ' ele ' );  

 2:  var  styles = window.getComputedStyle (Ele,null );

   3:  styles.color;  Get Color

The ability to see the number of default browser styles through Style.length. Ie6-8 does not support this method, you need to use the following method. For Firefox and Safari. The color is converted to RGB format.

3, Element.currentStyle:IE dedicated. Returns the value of the element's currently applied CSS property (including the outer-chain CSS file, the <style> properties embedded in the page, and so on).

 1:  var  ele = document.getElementById ( ' ele ' );  

 2:  var  styles = Ele.currentstyle;  

   3:  styles.color;

Note: For synthetic attribute border, etc. ie returns undefined, other browsers have return values. Some do not return. But borderleftwidth this property is the return value of the

4. GetPropertyValue (): Gets the direct property name of the CSS style

 1:  var  ele = document.getElementById ( ' ele ' );  

   2:  window.getcomputedstyle (ele,null). GetPropertyValue (' color ');

Note: The property name does not support camel formatting. Ie6-8 does not support this method. You need to use the following methods

5, GetAttribute (): Similar to GetPropertyValue, there is a little difference is the property name hump format

 1:  var  test = document.getElementById ( ' test ' );  

   2:null). GetPropertyValue ("BackgroundColor");

Note: This method only supports ie6-8.

The following methods of obtaining styles are compatible with IE, Chrome, Firefox, etc.

 1:  function  getStyle (ele) { 

 2:  var  style = null ;  

 3:  

 4:  if  (window.getComputedStyle) { 

 5:  null );  

 6:  else  { 

 7:   

   8:     }

   9:     

:   return  style;  

One   :  }

In jquery, you often use CSS () to get style properties. The getComputedStyle and GetPropertyValue methods are applied to the underlying operations.

Summary of ways to get styles using native JavaScript