How to get css styles by parsing js

1. Get inline styles

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

  alert();//100px

  alert(['height']);//100px

  var style=;
  alert();//red

  ='green';//myDiv background color changes to green</script>

In this case, the style attribute is only possible to obtain and set styles, because the attribute returns a set of style attributes and corresponding values ​​similar to an array. Therefore, when accessing specific styles, you can adopt two methods, namely ". Attribute Name" and "['Attribute Name']". However, it should be noted that for the attribute names of short bars such as background-color; margin-left in the css style, the name should be changed to camel style when using the style attribute to get the setting style, such as.

2. Because of the first method, only inline styles can be obtained using the style attribute.However, the actual situation is that documents now basically follow the idea of ​​separation, and the styles are basically external links, so all three styles must be considered. At this time, other methods must be used for acquisition. In this case, different browsers have different processing methods (mainly ie and non-ie).Therefore, according to the browser, it can be divided into two ways:

（2.1）Non-IE browserIn this article, the getComputedStyle(ele, null/pseudo-class) method of the object is used. This method accepts two parameters. The first is the element to be examined, and the second is based on the situation. If the element itself is only examined, it is null. If the pseudo-class is examined, it is the pseudo-class of the response. The final style combination obtained by this method is also an example of an array similar to that obtained by the element.

（2.2）In ie browserIn this article, the getComputedStyle() method is not supported, but for each tag element, there is a currentStyle attribute similar to the style attribute, and the usage is the same as the style usage. But the style ranges obtained are different. The currentStyle gets close to the getComputedStyle() method.

In order to achieve compatibility during processing, a function can be created according to these two different processing methods to achieve compatibility purposes, so that styles can be successfully obtained regardless of 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 = ("myDiv");
  var finalStyle =  ?  : (myDiv, null);/*Use to determine whether currentStyle is supported (whether it is ie)
   Get style*/ by different methods
  alert();  //"red"
  alert();       //"100px"
  alert();       //"200px"
</script>

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!