js中style,currentStyle,getComputedStyle和getBoundingClientRect的區別以及獲取css操作方法

在js中,之前我們獲取屬性大多用的都是ele.style.border這種形式的方法,但是這種方法是有侷限性的,該方法只能獲取到行內樣式,獲取不了外部的樣式.所以呢下面我就教大家獲取外部樣式的方法,因為獲取外部的樣式存在相容性的問題,所以後面我還會教大家解決相容性的方法.

style:各大瀏覽器都相容,能設定樣式和獲取樣式,但是獲取不了外部樣式,如果寫了行內沒有的樣式,返回的是空值

寫法:ele.style.attr(這樣為獲取),ele.style.attr="值";

 寫法:ele.currentStyle["attr"]或者ele.currentStyle.attr;

var div=document.getElementsByTagName("div")[0];
if(div.currentStyle){
    //IE上相容
    console.log(div.currentStyle["width"]);
}
else{
    //火狐谷歌上相容
    console.log(window.getComputedStyle(div,null)["width"]);
}
 

一個相容性的方法：

var div=document.getElementsByTagName("div")[0];
console.log(getStyle(div,"background-color"));
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

getBoundingClientRect()：返回一個矩形物件，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離

var box=document.getElementById('box');         // 獲取元素
alert(box.getBoundingClientRect().top);         // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right);       // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom);      // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left);        // 元素左邊距離頁面左邊的距離

document.documentElement.clientTop;  // 非IE為0，IE為2
document.documentElement.clientLeft; // 非IE為0，IE為2
//分別加上外邊據、內邊距、邊框和滾動條，用於測試所有瀏覽器是否一致。
functiongGetRect (element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left= document.documentElement.clientLeft;
    return{
        top    :   rect.top - top,
        bottom :   rect.bottom - top,
        left   :   rect.left - left,
        right  :   rect.right - left
    }

}