If you want to get a specific style attribute value of an element

1. Element. style. Attribute name

We need to write the style of the element on the in-line style (it doesn't work in the style sheet)

console.log(box.style.height)  ->null

In real projects, this approach is not often used because all styles cannot be written in order to get values (separation of html and css cannot be achieved)

2. Use window. getComputedStyle (the current operating element object, the pseudo-Class of the current element [generally we don't use pseudo-Class to write null]) to get all the styles computed by the browser.

All Browser-Computed Styles: As long as the current element tag can be displayed on the page, all of his styles are browser-computed (rendered) - > even if some of them are not written, we can get them.

The result is an instance of the class CSSStyleDeclaration: it contains all the style attributes and values of the current element

console.log(window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["height"]

3. Although the method is easy to use, it is incompatible under IE6-8: because there is no getComputedStyle property under window s - > error will be reported.

Under IE6-8, we can use current Style to get all the styles computed by browsers.

　　console.log(box.currentStyle)

　　console.log(box.currentStyle.height)

Get Style Compatible Writing getCss: Gets the value of [attr] in all browser-computed styles of the current element

/*
            curEle:[object] Element objects to be operated on at present 
            attr:[string] The name of the style attribute we want to get
            1,Use try and catch to handle compatibility (only if necessary)
               Prerequisite: The code in try must be guaranteed to report errors when it is incompatible, so that catch can catch error information and process other errors.
               Whether the current browser supports this method or not, you need to execute the code in try once. If IE7 is currently incompatible with window.getComputedStyle, you need to execute the code in catch again and again, execute twice, and consume performance.
            2,Determine whether this property or method exists in the current browser. Existence is compatible and nonexistence is incompatible.
            3,Compatible window.navigator.userAgent is handled by detecting the version and type of browser
            Getting the current browser is IE6-8
            
        */
        function getCss(curEle,attr){
            var val = null;
            //Method 2
            if("window.getComputedStyle" in window){//perhaps window.getComputedStyle
                var = window.getComputedStyle(curEle,null)[attr];
            }else{
                var = curEle.currentStyle[attr];
            }
            //Method 1
            try{
                var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){
                var = curEle.currentStyle[attr];
            }
            //Method 3
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                var = curEle.currentStyle[attr];
            }else{
                var = window.getComputedStyle(curEle,null)[attr];
            }
            return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

Standard browsers and IE browsers still get different results - > For some style attributes, different browsers get different results, mainly because getComputedStyle and current Style are different in some aspects.

For composite style values, they can be disassembled to obtain

console.log(getCss(box,"marginTop"))

The getCss above is not finished yet, so let's upgrade it for the first time: Remove the acquired stylesheet value "units" (parseFloat can only be used if it meets "numbers + units / numbers")

function getCss(curEle,attr){
            var val = null;
            var reg = null;
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                var = curEle.currentStyle[attr];
            }else{
                var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;

            return reg.test(val)?parseFloat(val):val; //This is certainly not a good way to write. For some style attributes, the value can not be deunited, for example: float position  margin  padding  border    These composite values background    
        }

Second Upgrade: Some style attributes are incompatible in different browsers, such as opacity

function getCss(curEle,attr){
            var val = null;
            var reg = null;
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];
                    //Anatomize the results and get the numbers inside, dividing the numbers by 100 to keep them in line with standard browsers.
                    reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1

                }else{
                    val = curEle.currentStyle[attr];
                }                
            }else{
                //If the result passed in is opacity，It shows that I want transparency, but I want transparency. IE6-8 Getting transparency below needs to be used filter
                val = window.getComputedStyle(curEle,null)[attr];
            }
        }

In addition to a small point of knowledge: pseudo-Class

Before: after: Create a new virtual label in front or behind an element's note. We can add style to the virtual label, add content, etc. We can also remove the float by using pseudo classes. We can get window. getComputedStyle (box, "before") content in the following way.