Parsing JS How to get CSS style _javascript tips

First, get inline style

<div id = "Mydiv" style= "width:100px;height:100px;background-color:red"; border:1px solid black; " ></div>
<script>
  var mydiv = document.getElementById ("mydiv");

  alert (myDiv.style.width);//100px

  alert (mydiv.style[' height ');//100px

  var style=mydiv.style;
  alert (style.backgroundcolor);//red

  mydiv.style.backgroundcolor= ' green ';//mydiv background color changed to greenish 
</script>

In this case, you can get and set the style only by the style property, because the Element.style property returns a set of style attributes and corresponding values similar to the array, so there are two ways to access a specific style, namely "Ele.style. Property name and" Ele.style[' property name ']. Note, however, that the name of a property that is connected to a short bar such as Background-color;margin-left in a CSS style is changed to the hump when the style property is used to get the styling. such as Ele.style.backgroundColor.

second, because the first method, which uses the Style property, can only get an inline style. However, the reality is that the document now basically follows the separation of ideas, styles are basically external links, so all three styles have to be taken into account, then use other methods to obtain, and in this case, when the style acquisition, different browsers have different ways (mainly IE and non ie), therefore, depending on the browser can be divided into two ways:

(2.1) non-IE browsers use the Document.defaultview object's getComputedStyle (Ele,null/Pseudo Class) method, which accepts two parameters, the first is the element to be examined, and the second is based on the situation, If only the element itself is null, the pseudo class is the response if the pseudo class is to be examined. The final style combination that this method obtains for an element is also an instance of a similar array.

(2.2) in IE browser , the getComputedStyle () method is not supported, but for each label element there is a Currentstyle property similar to the Style property, and the usage is the same as the style usage. Just get a different style range. The currenstyle gets close to the getComputedStyle () method.

To achieve compatibility when processing, you can create a function to achieve compatibility with these two different ways of handling, so that you can get the style successfully in that browser. As shown below:

<style type= "Text/css" >
#myDiv {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<div id = "Mydiv" style= "background-color:red; border:1px solid black;" ></div>
<script>
  var mydiv = document.getElementById ("mydiv");
  var Finalstyle = Mydiv.currentstyle? MyDiv.currentStyle:document.defaultView.getComputedStyle (mydiv, NULL);/* Use to determine whether or not to support currentstyle (IE)
  To obtain style*/
  alert (Finalstyle.backgroundcolor) by different methods;  "Red"
  alert (finalstyle.width);       "100px"
  alert (finalstyle.height);       "200px"
</script>

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!