JS中獲取CSS樣式的方法

1.對於內聯樣式，能夠直接使用ele.style.屬性名（固然也能夠用鍵值對的方式）得到。注意在CSS中單詞之間用-鏈接，在JS中要用駝峯命名法

如

<div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div>
    <script>
        var dv = document.getElementById("dv");
        console.log(dv.style.width);    //100px
        console.log(dv.style["height"]);//200px
        console.log(dv.style.backgroundColor);//pink
        console.log(dv.style.border);//1px solid green
    </script>

2.對於外聯樣式表或者頭部的style標籤內的樣式表裏的樣式內容，用上面的方法沒法得到

可使用js中的window.getComputedStyle(element,pseudoElement).屬性名的方法得到。獲取的樣式是元素在瀏覽器中最終渲染效果的樣式。

其中window.能夠省略

其中pseudoElement: 可選，僞類元素，當不查詢僞類元素的時候能夠忽略或者傳入 null。

<style>
        #dv2{
            width: 100px;
            height: 200px;
            background-color: #0086b3;
            border: 1px solid red;
        }
    </style>
 <div id="dv2" style="border-color: black"></div>
    <script>
        var dv2 = document.getElementById("dv2");
        console.log(dv2.style["height"]);//空值，沒有內聯該樣式沒法獲取
        console.log(dv2.style.backgroundColor);//空值，沒有內聯該樣式沒法獲取
        console.log(window.getComputedStyle(dv2,null).width);//100px
        console.log(getComputedStyle(dv2,null).backgroundColor);//rgb(0, 134, 179)
        console.log(getComputedStyle(dv2,null).border); //1px solid rgb(255, 0, 0),內聯樣式修改爲了黑色，內聯的權重更高。
        console.log(getComputedStyle(dv2,null)["border"]); //1px solid rgb(255, 0, 0)鍵值對的方式固然也行

    </script>

3.修改CSS樣式，只能經過ele.style.屬性名的方式修改CSS樣式，不能經過getComputedStyle()的方法修改。