The simple realization method of the acquisition style of JS (recommended)

The simple realization method of the acquisition style of JS (recommended) _javascript tips

Last Update:2017-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic code:

<! DOCTYPE html>

1. By using the Element.style property to get

<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 inline styles, cannot get styles from <style> labels, and cannot get external styles

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

<script>
    var div = document.getelementsbytagname ("div") [0];
    div.style[' background-color '] = "green";
    Console.log (Div.style.backgroundColor); Green
  </script>

2. Get styles through getComputedStyle and Currentstyle

getComputedStyle's use environment 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 in IE can get the perfect support, Chrome does not support, FF does not support

<script>
    var div = document.getelementsbytagname ("div") [0];
    var styleobj = Div.currentstyle;
    Console.log (Styleobj.backgroundcolor); Red
    Console.log (styleobj.color);//yellow
  </script>

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

3.1 Ele.style are read-write, while getComputedStyle and Currentstyle are reading-only

3.2 Ele.style can only get the CSS styles that are set in the inline style property, and getComputedStyle and Currentstyle can get other default values

3.3 Ele.style Gets the style in the style property, not necessarily the final style, and the other two get the final CSS style of the element

4. Get style compatibility notation

<script>
    //Get non-row styles (styles in style tags or styles in a link css file), obj is an element, attr is a style name
    function GetStyle (obj,attr) {
       / /For IE
       if (obj.currentstyle) {return
         obj.currentstyle[attr];               Because the function passes the attr is the string, therefore must use [] to take the value
       }else{
         //For non IE return
         window.getcomputedstyle (obj,false) [attr];
       }
       /* Get or Set CSS Properties/
    function css (obj,attr,value) {
       if (Arguments.length = 2) {
         return GetStyle (obj,attr);
       } else{   
         obj.style[attr] = value;
       }
    }
  </script>

5.window.getcomputedstyle (ele[,Pseudoelt]);

The second argument, if NULL or omitted, gets the Cssstyledeclaration object that is Ele

If it is a pseudo class, it gets the Cssstyledeclaration object of the Pseudo class

<style>
div{
  width:200px;
  height:200px;
  Background-color: #FC9;
  font-size:20px;
  Text-align:center;  
}
div:after{
  Content: "This are after";
  Display:block;
  width:100px;
  height:100px;
  Background-color: #F93;
  margin:0 Auto;
  line-height:50px;
    
}
</style>

<body>
  <div id= ' mydiv ' > This is
    div
  </div> 
  <input id= ' BTN ' type= ' button ' value= ' GetStyle '/> 
  <script>
    var btn = document.queryselector (' #btn ');
    Btn.onclick = function () {
      var div = document.queryselector (' #myDiv ');
      var styleobj = window.getComputedStyle (Div, ' after ');
      Console.log (styleobj[' width ');
    }
  </script>
</body>

6.getPropertyValue gets 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 cannot be a hump-style representation

obj.currentstyle[' margin-left '] effective

obj.currentstyle[' marginleft '] effective

window.getComputedStyle (obj,null) [' Margin-left '] effective

window.getComputedStyle (obj,null) [' marginleft '] effective

window.getComputedStyle (Obj,null). GetPropertyValue (' margin-left ') effective

window.getComputedStyle (Obj,null). GetPropertyValue (' marginleft ') invalid

Obj.currentStyle.width Effective

Invalid Obj.currentstyle.background-color

Obj.currentStyle.backgroundColor Effective

window.getComputedStyle (obj,null). Width effective

window.getComputedStyle (obj,null). Background-color invalid

window.getComputedStyle (obj,null). BackgroundColor Effective

In summary, is a "-" attribute can not be directly point out, so there are getpropertyvalue methods to deal with, but you can use [] to replace the GetPropertyValue

7.defaultView

In many of the online demo code, getComputedStyle is invoked by Document.defaultview objects. In most cases, this is not necessary because it can be invoked directly through the Window object. But in one case, you have to use DefaultView, which is the style (IFRAME) that is accessed on the firefox3.6 in the child frame.

The above JS to obtain the style of simple implementation (recommended) is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

The simple realization method of the acquisition style of JS (recommended) _javascript tips

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support