js獲取元素位置和style的兼容性寫法

今天說一下js獲取元素位置和style的方法。當然不只是element.style那么簡單。。

主角：getBoundingClientRect,getClientRects，getComputedStyle，currentStyle

配角：getPropertyValue，getAttribute

getBoundingClientRect：

這個方法返回一個矩形對象，包含六個屬性：left、top、width、height、right和bottom（ie下沒有width和height）。分別表示元素各邊與頁面上邊和左邊的距離。

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

注意：這里的getBoundingClientRect()的bottom和right和css中的不一樣。bottom是元素下邊到頁面上邊的距離，right是元素右到頁面左的距離。

通常這個方法用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。

getBoundingClientRect()最先是IE的私有屬性，現在已經是一個W3C標准。所以你不用當心瀏覽器兼容問題，不過還是有區別的：IE只返回top,lef,right,bottom四個值，不夠可以通過以下方法來獲取width,height的值：

   var ro = object.getBoundingClientRect();
    var Width = ro.right - ro.left;
    var Height = ro.bottom - ro.top;

兼容所有瀏覽器寫法：

   var ro = object.getBoundingClientRect();
    var Top = ro.top;
    var Bottom = ro.bottom;
    var Left = ro.left;
    var Right = ro.right;
    var Width = ro.width||Right - Left;
    var Height = ro.height||Bottom - Top;

有了這個方法，獲取頁面元素的位置就簡單多了:   這樣就可以兼容所有瀏覽器了。

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

getClientRects：

兼容性方面：除了safari，firefox2.0外所有瀏覽器都支持getClientRects和getBoundingClientRect

他倆其實差不多，返回的有點差別：

getClientRects 返回一個TextRectangle集合，就是TextRectangleList對象。
getBoundingClientRect 返回 一個TextRectangle對象，即使DOM里沒有文本也能返回TextRectangle對象.

也就是說getClientRects返回值需要加一個[0]就是getBoundingClientRect的返回值了。

這是width: 200px;height: 300px;margin: 40px;的一個div的樣式。第一個是getClientRects的返回，第二個是getBoundingClientRect的返回。

getComputedStyle：

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclaration])，只讀。他強大的地方是可以取到元素的偽類。

var dom = document.getElementById("test"),
  style = window.getComputedStyle(dom , ":after");

這不就跟dom.style是一樣的嗎？還是有差別的：

比如getComputedStyle只讀不可寫。主要區別是getComputedStyle取的是最終應用在元素上的所有CSS屬性對象。而style只能獲取元素style屬性中的CSS樣式，也就是該標簽里面寫的內嵌樣式，別的樣式是取不到的。

就是說getComputedStyle把這個元素所有屬性都取出來了，包含屬性的值。取了一下，大概幾百個......但是你取元素的syle屬性，就會看到一堆的屬性名加空字符串，因為它還沒有設置樣式。

相信我不說你也知道這是什么。

但是getComputedStyle支持ie9-。但是ie又給出了它自己的實現---currentStyle

currentStyle：

與getComputedStyle基本一致，不過currentStyle不支持偽類。

比如，我們獲取元素的高度可以這么寫。

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

但是這個東西和getComputedStyle還是有一定差異的，比如FireFox瀏覽器下是cssFloat，而IE9瀏覽器下則是cssFloat和styleFloat都有。等等。

getPropertyValue：

getPropertyValue方法可以獲取CSS樣式申明對象上的屬性值（直接屬性名稱），例如

window.getComputedStyle(element, null).getPropertyValue("float");

其實他和直接訪問一樣的，但是它不用寫駝峰呀，而且主要是不用寫cssFloat與styleFloat。

 getAttribute：

getAttribute基本同上，但是它得寫駝峰。。

style.getAttribute("backgroundColor");

最后是jquery的css()不解釋，萬能。除了一點，他不能獲取偽類。 

最后補充一下元素的位置樣式。

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border //offset比client多了border的寬度
在項目中，可以用getBoundingClientRect來獲取元素的width等信息，getComputedStyle獲取元素的margin等位置信息，然后可以加上元素的clientWidth等等的元素本身的位置，可以做到很好的兼容性。