Native JS easy way to get element style _javascript tips

We often encounter in the development process to get or change the DOM elements through JS style, there are many methods, such as: by changing the DOM element class. Now we're going to talk about native JS to get the CSS style for DOM elements, and note that fetching is not set

Before we get started. Getting all CSS property objects that are ultimately applied to an element means that the default style of the browser is returned if no style is set for the element.

1, Ele.style

When you learn the DOM, you see the element style value through Ele.style, but sometimes you get a null value instead of the node's style value. This is because Ele.style can only get the style values written in the style attribute in the element label and cannot get to the definition in <style></style> and through <link href= "Css.css" > Load in style properties

Example:

var test = document.getElementById ("test");
    Gets the color Test.style.color of the node

    ;

2, getComputedStyle ()

getComputedStyle is a CSS property value that can get all the final uses of the current element.

The syntax is as follows:

window.getComputedStyle ("element", "pseudo class");

This method takes two parameters: the element to get the calculated style and a pseudo-element string (for example, ": Before"). If pseudo element information is not required, the second argument can be null. You can also use the Document.defaultView.getComputedStyle ("element", "pseudo class");

Example:

var test = document.getElementById ("Test"),
    demo = window.getComputedStyle (test, NULL); 

    Gets the color Demo.color of the node

      

Note: Firefox and Safari convert colors to RGB format, and if there are no styles on the test node, view the number of browser default styles by Style.length. Ie6-8 does not support this method, you need to use the following method

3, Ele.currentstyle

Currentstyle is a property of IE browser, its syntax is similar to Ele.style, the difference is that Element.currentstyle returns the final CSS attribute value of the element's current application (including the external chain CSS file, the embedded < in the page). Style> properties, etc.).

Grammar:

var style = Dom.currentstyle;

Example:

var test = document.getElementById ("Test"),

    demo = Test.currentstyle; 

    Gets the color Demo.color of the node

    ; 

Note: For integrated properties border, ie returns undefined, other browsers have return values, some do not return, but borderleftwidth such attributes are returned values

4, GetPropertyValue ()

GetPropertyValue get the Direct property name of a CSS style

The syntax is as follows:

window.getComputedStyle (element, null). GetPropertyValue (properties)

Example:

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

   window.getComputedStyle (test, NULL). GetPropertyValue ("Background-color");

Note: The property name does not support the hump format, IE6-8 does not support this method, you need to use the following method

5, GetAttribute

GetAttribute is similar to GetPropertyValue, one of the differences is the attribute name hump format

Example:

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

    window.getComputedStyle (test, NULL). GetPropertyValue ("BackgroundColor");

Note : This method only supports Ie6-8

Summary:

jquery's CSS () method, its low-level operation has applied the getComputedStyle and the GetPropertyValue method, when we use the native JS development, can obtain the element's value by the above method.

Here's a way to get the element style from a compatible Ie,firefox,chrome browser, which can be applied to a project

function GetStyle (ele) {
  var style = null;
  
  if (window.getComputedStyle) {
    style = window.getComputedStyle (ele, null);
  } else{
    style = Ele.currentstyle;
  }
  
  return style;
}

The above native JS get element style Simple method is small series to share all the content, hope to give you a reference, also hope that we support cloud habitat community.