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

原生js獲取CSS樣式.png

一 原本的我??

問題：

是這樣的斗幼，一開始需要獲取某一個元素的left值澎蛛，我就用ele.style.left去獲取了（基礎(chǔ)不扎實還好意思來丟人），然后居然返回的是空蜕窿。
好吧谋逻，追本溯源，問題的根源以及區(qū)別就在這里了桐经。

ele.style 的使用

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

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

window.getComputedStyle() 與getPropertyValue

image.png

getPropertyValue

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

特點：
- 只可讀，但是可以讀取所有的樣式屬性值宋光。但是不能通過該方法去設(shè)置樣式屬性值貌矿。

css中設(shè)置樣式屬性的一些方法:

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

2 IE下的currentStyle 與 getAttribute

currentStyle獲取的是一個元素的所有的樣式屬性值，這一點功能是與getComputedStyle()一樣的罪佳，但是在獲取某一個具體的屬性的時候逛漫，可以結(jié)合getAttribute來實現(xiàn)。
和 getComputedStyle 方法不同的是赘艳，currentStyle 要獲得屬性名的話必須采用駝峰式的寫法酌毡。也就是如果我需要獲取 font-size 屬性，那么傳入的參數(shù)應(yīng)該是 fontSize蕾管。因此在IE 中要獲得單個屬性的值枷踏，就必須將屬性名轉(zhuǎn)為駝峰形式。(感謝這篇文章掰曾。)

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

關(guān)于返回值

關(guān)于getComputedStyle返回的值，具體查看這里旷坦。
不管你最初定義的樣式是什么掏熬，涉及到寬度高度之類的，返回的都是最后實際使用的寬度和高度秒梅。

image.png

image.png

關(guān)于ele.style的返回值旗芬，是和定義的樣式的值相等的，如果設(shè)置為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);  //無返回值漱办。

然后是元素的高寬，對于一個沒有設(shè)定高寬的元素而言婉烟，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 娩井。而標(biāo)準(zhǔn)瀏覽器會直接返回它的 px 值，當(dāng)然我們希望在 IE 下也返回 px 值似袁。

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

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

參考鏈接 chokcoco的博客園