js 獲取css非行內樣式，你應該瞭解的getComputedStyle方法

 壹 ❀ 引

咱們知道書寫css有三種作法，它們分別是行內樣式，內嵌樣式和外部引用。咱們來看個例子，下面這個div分別經過內部樣式添加了顏色，內嵌樣式添加了字體大小，外部引入樣式添加了寬度。

<!-- 行內樣式 -->
<div style="color: red;">聽風是風</div>
<!-- 內嵌樣式 -->
<style>
    div {
        font-size: 24px;
    }
</style>
<!-- 外部引入 -->
<link rel="stylesheet" href="style/demo.css">
/* demo.css */
div{
    width: 100px;
}

如今咱們來嘗試獲取這個div的樣式，使用JavaScript寫法：

let div = document.querySelector("div");
console.log(div.style.color);//red
console.log(div.style.fontSize);//空
console.log(div.style.width);//空

事實證實，經過style屬性只能訪問到行內樣式，內嵌以及外部引用都沒法讀取，怎麼辦呢？咱們能夠使用 getComputedStyle 方法。

 貳 ❀ 解決方案

仍是上面的例子，咱們使用getComputedStyle方法，直接上代碼：

let div = document.querySelector("div");
let style = window.getComputedStyle(div, null);
console.log(style['color']); //rgb(255, 0, 0)
console.log(style['fontSize']); //24px
console.log(style['width']); //100px

看，無論以何種方式設置的樣式，getComputedStyle方法都能輕鬆幫你拿到，這個方法是個什麼意思呢？咱們來講說這個方法。

 叄 ❀ 關於getComputedStyle方法

一個完整的getComputedStyle方法實際上是這樣：

let style = window.getComputedStyle(element, [pseudoElt]);

其中 element 是你須要獲取style 的元素；咱們知道元素能經過after與before設置僞元素（注意是僞元素不是僞類），pseudoElt就是用於獲取僞元素樣式，若是不須要請將此參數設置爲null。返回的style是一個屬性鍵值對的合集，是一個對象，咱們能夠經過屬性名直接訪問對應的值，或者經過 getPropertyValue 方法獲取，咱們來看一個帶有僞元素的例子：

<input type="text" class="demo">

/* demo.css */
input {
    outline: none;
    border: 1px solid #ddd;
}

input::after {
    content: "";
    border: 2px solid #e4393c;
}

var input = document.querySelector(".demo");
var border = window.getComputedStyle(input, null)['border'];
console.log(border); //1px solid rgb(221, 221, 221)
//等同於
var border = window.getComputedStyle(input, null).getPropertyValue("border");
console.log(border); //1px solid rgb(221, 221, 221)

//獲取僞元素
var border = window.getComputedStyle(input, '::after')['border'];
console.log(border); //2px solid rgb(228, 57, 60)
//等同於
var border = window.getComputedStyle(input, '::after').getPropertyValue("border");
console.log(border); //2px solid rgb(228, 57, 60)

咱們來看看此方法的兼容性：

 兼容性很是優秀，IE都完美兼容到了9以上，可能有人就要問了，要是我低版本IE也要獲取非行內樣式怎麼辦？其實早版本的IE也有專門提供一個屬性 currentStyle，它的使用是這樣：

var style = element.currentStyle[prop];

此屬性的兼容性以下圖：

能夠看到從兼容性來講，這兩個屬性方法完美的互補了IE兼容狀況，注意，若是不考慮低版本IE，請直接使用 getComputedStyle 方法。

 肆 ❀ 一個通用樣式獲取/設置方法

直接上代碼：

/**
 * @desc 一個用於設置和獲取css樣式的方法
 * @param {*} ele element元素
 * @param {*} prop 樣式名
 * @param {*} val 樣式值
 */
function css(ele, prop, val) {
    if (val) {
        // 設置css屬性
        ele.style[prop] = val;
    } else {
        // 兼容低版本IE
        if (ele.currentStyle) {
            return ele.currentStyle[prop];
        } else {
            return window.getComputedStyle(ele, null)[prop];
        };
    };
};

那麼關於獲取非行內樣式就說到這裏了，還有一小時跨年，新年快樂。2020年也要加油！