How to get css style in 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, get And setting the style only depends on the style attribute, because the element.style attribute returns a set of style attributes and corresponding values ​​​​similar to array, so when accessing the specific style, you can take two steps The two methods are "ele.style.Attribute name" and "ele.style['Attribute name']". However, it should be noted that for the attribute names that are connected by dashes such as background-color;margin-left in the css style, the name must be changed to camel case when using the style attribute to obtain and set the style. , 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 getComputedStyle(ele of document.defaultViewobject, null/pseudo-class ) method, this method accepts two parameters, the first is the element to be inspected, and the second depends on the situation. If only the element itself is inspected, it is null. If the pseudo-class is to be inspected, it is 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 there is a current similar to the style attribute for each tag element. Property of Style, and its usage is the same as style usage. 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, you can successfully obtain the style . It looks like this:

<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 detailed content of How to get css style in js. For more information, please follow other related articles on the PHP Chinese website!