事情是這樣的，我今天在幫一個朋友實現原生手寫輪播圖，然后我發現自己在獲取一個元素的樣式上出現了一點點小問題，就順帶去谷歌了一番了。

原生js獲取CSS樣式.png

一 原本的我??

問題：

是這樣的，一開始需要獲取某一個元素的left值，我就用ele.style.left去獲取了（基礎不扎實還好意思來丟人），然后居然返回的是空。
好吧，追本溯源，問題的根源以及區別就在這里了。

ele.style 的使用

• 只讀內聯樣式屬性：使用該方法獲取的樣式值，是元素內聯的樣式上才有的。舉個例子，如果你有一個元素<div style='color:red，left:40px'></div>,那么你獲取這個元素的樣式，ele.style.color 就會返回left,如果使用ele.style.left就會返回40px;
  一個溫馨提示：如果真的是使用這種方式去獲取屬性值，那么需要轉換成整數而且去掉單位，那么就可以用parseInt(40px)，就會返回40
• 可讀可寫：該方法可以同時設置或者獲取某一個元素的樣式 （記住，只能讀取定義的style樣式里的屬性。）

所以，我那樣是獲取不到某一個元素的一個其他方式設置的樣式屬性值的，所以我就打算谷歌一下別的方法了。

window.getComputedStyle() 與getPropertyValue

image.png

getPropertyValue

// 基本語法
getComputedStyle(document.getElementById('caseroul'),null).getPropertyValue(‘left’)

特點：
- 只可讀，但是可以讀取所有的樣式屬性值。但是不能通過該方法去設置樣式屬性值。

css中設置樣式屬性的一些方法:

elt.style.cssText = "color: blue"; // 設置多個樣式屬性 
elt.setAttribute("style", "color: blue"); // 設置多個樣式屬性 
elt.style.color = "blue"; // 直接設置樣式屬性
var st = elt.style; st.color = "blue"; // 間接設置樣式屬性

2 IE下的currentStyle 與 getAttribute

currentStyle獲取的是一個元素的所有的樣式屬性值，這一點功能是與getComputedStyle()一樣的，但是在獲取某一個具體的屬性的時候，可以結合getAttribute來實現。
和 getComputedStyle 方法不同的是，currentStyle 要獲得屬性名的話必須采用駝峰式的寫法。也就是如果我需要獲取 font-size 屬性，那么傳入的參數應該是 fontSize。因此在IE 中要獲得單個屬性的值，就必須將屬性名轉為駝峰形式。(感謝這篇文章。)

// IE 下語法：
// IE 下將 CSS 命名轉換為駝峰表示法
// font-size --> fontSize
// 利用正則處理一下就可以了
function camelize(attr) {
    // /\-(\w)/g 正則內的 (\w) 是一個捕獲，捕獲的內容對應后面 function 的 letter
    // 意思是將 匹配到的 -x 結構的 x 轉換為大寫的 X (x 這里代表任意字母)
    return attr.replace(/\-(\w)/g, function(all, letter) {
        return letter.toUpperCase();
    });
}
// 使用 currentStyle.getAttribute 獲取元素 element 的 style 屬性樣式
element.currentStyle.getAttribute(camelize(style));

關于返回值

關于getComputedStyle返回的值，具體查看這里。
不管你最初定義的樣式是什么，涉及到寬度高度之類的，返回的都是最后實際使用的寬度和高度。

image.png

image.png

關于ele.style的返回值，是和定義的樣式的值相等的，如果設置為auto，就直接返回auto。

const test = document.querySelector('.test');
console.log(test.offsetWidth, '獲取offsetWidth的寬度');    // 204,包括邊框的寬度
console.log(getComputedStyle(test, null).getPropertyValue('width'));   // 200px，實際的樣式寬度
console.log(test.getBoundingClientRect().right - test.getBoundingClientRect().left)   // 200
console.log(test.style.width);  //無返回值。

然后是元素的高寬，對于一個沒有設定高寬的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而標準瀏覽器會直接返回它的 px 值，當然我們希望在 IE 下也返回 px 值。

這里的 HACK 方法是使用 element.getBoundingClientRect() 方法。

element.getBoundingClientRect() -- 可以獲得元素四個點相對于文檔視圖左上角的值 top、left、bottom、right ，通過計算就可以容易地獲得準確的元素大小。

參考鏈接 chokcoco的博客園