JS獲取DOM元素位置與大小

每乙個html元素都有以下屬性

offsetwidth

offsetheight

offsetleft

offsettop

clientwidth

clientheight

scrollwidth

scrollheight

scrollleft

scrolltop

screenx

screeny

offsetheight/offsetwidth: 表述元素的外尺寸：元素內容+內邊距+邊框(不包括外邊距)

offsetleft/offsettop: 表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetparent物件）左上角的距離。

offsetparent元素是指元素最近的定位（relative,absolute）祖先元素,可遞迴上溯。

* 獲取元素在頁面中的座標(x, y)

* @param e

*/function getelementposition(e)

return ;

}clientwidth/clientheight: 用於描述元素的內尺寸：元素內容+兩邊內邊距

常用於獲取視口的高寬

/**

* 獲取視口的大小
* 用法：
* var viewport = getviewportsize();
* viewport.width/viewport.height 
* @param w
*/function getviewportsize(w) ;
}var d = w.document;
if(document.compatmode == 'css1compat') ;
}return ;
}

scrollleft/scrolltop：是指元素滾動條位置，它們是可寫的(被隱藏的內容區域左側/上方的畫素)

瀏覽器視窗的滾動條位置：window物件的pagexoffset和pageyoffset, ie 8及更早版本可以通過scrollleft和scrolltop屬性獲得滾動條位置

* 獲取滾動長度

* 滾動條向下滾動被隱藏的頁面長度

* 通用的scrollleft和scrolltop

* @param w

*/function getscrolloffset(w) ;

}var d = w.document;

if(document.compatmode == 'css1compat') ;}//

return ;

}滑鼠相對於使用者顯示器螢幕左上角的x,y座標。標準事件和ie事件都定義了這2個屬性

向左轉|

向右轉

小結：

注意：這些屬性都是很多是唯讀的，每次訪問它們都需要重新計算

整個頁面的高度：document.documentelement.scrollheight

內容區上面被隱藏的頁面高度: window.pageyoffset/document.documentelement.scrolltop

element.offsetheight = element.clientheight + borderleft-width*2

html document視窗的尺寸和位置

js獲取dom元素位置函式

element.getboundingclientrect 方法返回元素的大小及其相對於視口的位置。可以獲取 這些屬性除了width和height都是相對於視窗左上角計算的。由於是當前視窗的屬性值，要想獲取相對於整個網頁的左上角定位值，要給top和left屬性加上當前滾動的位置，通過window.s...

DOM獲取元素大小

1.style獲取行內的元素大小 var box document.getelementbyid box alert typeof box.style.width alert box.style.height 2.獲取計算後的css大小，如果沒有設定，非ie會獲取預設大小，ie會理解為0 var s...

JS 獲取dom元素

box class one name bbb style width 100px height 100px background color pink div1div box1 class one div1div box2 class one div1div 通過 id來獲取元素 var box d...