Home > Article > Web Front-end > Common ways to get styles in Js

Common ways to get styles in Js

php中世界最好的语言Original: 2017-11-28 15:26:462549browse

We know that if you want to operate CSS in JS, the most important thing is to obtain the style. Here is an article about the most common methods of obtaining styles in JS for your reference.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      color:yellow;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

Get it by using the element.style property

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

The element.style property can only get the inline style, not the style in the c9ccee2e6ea535a969eb3f532ad9fe89 tag, nor Unable to obtain external style

Since element.style is an attribute of the element, we can reassign the attribute to rewrite the display of the element.

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style[&#39;background-color&#39;] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

2. Get the style through getComputedStyle and currentStyle

The usage environment of getComputedStyle is chrome/safari/firefox IE 9,10,11

<script>
  var div = document.getElementsByTagName("div")[0];
  var styleObj = window.getComputedStyle(div,null);
  console.log(styleObj.backgroundColor); //red
  console.log(styleObj.color); //yellow
</script>

currentStyle can be used in IE It is perfectly supported, chrome does not support it, and ff does not support it

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = div.currentStyle;
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
  </script>

3. The difference between ele.style and getComputedStyle or currentStyle

3.1 ele.style is read and write, while getComputedStyle and currentStyle are only Read

3.2 ele.style can only get the CSS style set in the inline style attribute, while getComputedStyle and currentStyle can also get other default values

3.3 ele.style gets the style attribute The style in is not necessarily the final style, while the other two get the final CSS style of the element

4. How to get style compatibility

<script>
    //获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名
    function getStyle(obj,attr){
       //针对IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函数传过来的attr是字符串，所以得用[]来取值
       }else{
         //针对非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    function css(obj,attr,value){
       if(arguments.length == 2){
         return getStyle(obj,attr);
       }else{   
         obj.style[attr] = value;
       }
    }
  </script>
 
.window.getComputedStyle(ele[,pseudoElt]);

If the second parameter is null or If omitted, the CSSStyleDeclaration object of ele will be obtained.

If it is a pseudo-class, the CSSStyleDeclaration object of the pseudo-class will be obtained.

<style>
div{
  width:200px;
  height:200px;
  background-color:#FC9;
  font-size:20px;
  text-align:center;  
}
div:after{
  content:"This is after";
  display:block;
  width:100px;
  height:100px;
  background-color:#F93;
  margin:0 auto;
  line-height:50px;  
}
</style>
<body>
  <div id=&#39;myDiv&#39;>
    This is div
  </div> 
  <input id=&#39;btn&#39; type="button" value=&#39;getStyle&#39;/> 
  <script>
    var btn = document.querySelector(&#39;#btn&#39;);
    btn.onclick = function(){
      var div = document.querySelector(&#39;#myDiv&#39;);
      var styleObj = window.getComputedStyle(div,&#39;after&#39;);
      console.log(styleObj[&#39;width&#39;]);
    }
  </script>
</body>

getPropertyValue acquisition The specified property value in the CSSStyleDeclaration object

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.getPropertyValue("background-color"));
</script>
 
getPropertyValue(propertyName);中的propertyName不能是驼峰式表示
obj.currentStyle[&#39;margin-left&#39;] 有效
obj.currentStyle[&#39;marginLeft&#39;]  有效   
window.getComputedStyle(obj,null)[&#39;margin-left&#39;]  有效
window.getComputedStyle(obj,null)[&#39;marginLeft&#39;]  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;margin-left&#39;)  有效
window.getComputedStyle(obj,null).getPropertyValue(&#39;marginLeft&#39;)   无效
obj.currentStyle.width   有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor  有效
window.getComputedStyle(obj,null).width  有效
window.getComputedStyle(obj,null).background-color  无效
window.getComputedStyle(obj,null).backgroundColor 有效

To sum up, the property with "-" cannot be directly clicked, so there is the getPropertyValue method to handle it, but you can use [] to Replaces getPropertyValue

7.defaultView

In many online demo codes, getComputedStyle is called through the document.defaultView object. In most cases, this is not needed because it can be called directly through the window object. But there is one situation where you must use defaultView, which is to access the style (iframe) in the subframe on firefox3.6

I believe you have mastered the method after reading these cases, please pay attention to php for more exciting information Other related articles on the Chinese website!

Common ways to get styles in Js

Related articles