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, the default value given by the browser is returned. (Forum finishing)

1. Element.style: Only the style value in the style attribute written in the element tag can be obtained, cannot get to the definition in <style></style> and through <link href= "Css.css" > Load the style properties that come in

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

   2:  ele.style.color;    Get Color

2, window.getComputedStyle (): You can get all the end-use CSS property values for the current element.

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

This method takes two parameters: to get the element of the calculated style and a pseudo-element string (for example, ": Before"). If no pseudo-element information is required, the second argument 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

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

3, Element.currentStyle:IE dedicated, return the element is currently applied to the final CSS property values (including the outer chain CSS files, the <style> properties embedded in the page, etc.).

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

 2:  var  styles = Ele.currentstyle;  

   3:  styles.color;

Note: For the composite attribute border, IE returns undefined, other browsers have return values, some do not return, but borderleftwidth such 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 hump format, IE6-8 does not support this method, you need to use the following method

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, common CSS () gets the style attributes, and its underlying operation applies the getComputedStyle and GetPropertyValue methods.

Summary of ways to get styles using native JavaScript