How to get css style by parsing js

1. Get the inline style

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

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

  alert(myp.style[&#39;height&#39;]);//100px

  var style=myp.style;
  alert(style.backgroundColor);//red

  myp.style.backgroundColor=&#39;green&#39;;//myp背景色变为绿色 
</script>

In this case, getting and setting the style only depends on the style attribute. , because the element.style property returns an array-like set of style properties and corresponding values, there are two ways to access a specific style, namely "ele.style.property name" and "ele.style['property name' ]". However, it should be noted that for the attribute names connected by dashes such as background-color; margin-left in the CSS style, when using the style attribute to obtain and set the style, the name must be changed to camel case, such as ele.style. backgroundColor.

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

(2.1) In non-ie browsers, use the getComputedStyle(ele, null/pseudo-class) method of the document.defaultView object. This method accepts two parameters. The first one is the element to be inspected, and the second one is Depending on the situation, if you just examine the element itself, it will be null. If you want to examine the pseudo-class, it will be the pseudo-class of the response. The final style combination applied to the element obtained by this method is also an instance of a similar array.

(2.2)In IE browser, the getComputedStyle() method is not supported, but each tag element has an attribute similar to the currentStyle of the style attribute, and its usage is the same as The usage of style is the same. It's just that the style range obtained is different. The currenStyle obtained is close to the getComputedStyle() method.

In order to achieve compatibility during processing, you can create a function based on these two different processing methods to achieve compatibility, so that no matter what kind of browser, the style can be successfully obtained. As shown below:

<style type="text/css">
#myp {
  background-color:blue;
  width:100px;
  height:200px;
}
</style>
<p id ="myp" style="background-color:red; border:1px solid black;"></p>
<script>
  var myp = document.getElementById("myp");
  var finalStyle = myp.currentStyle ? myp.currentStyle : document.defaultView.getComputedStyle(myp, null);/*利用判断是否支持currentStyle（是否为ie）
  来通过不同方法获取style*/
  alert(finalStyle.backgroundColor);  //"red"
  alert(finalStyle.width);       //"100px"
  alert(finalStyle.height);       //"200px"
</script>

The above is the content of how to parse js to obtain css style. For more related content, please pay attention to the PHP Chinese website ( www.php.cn)!