JavaScript DOM 9 - 元素的尺寸與位置

zhaot 發布于2019-08-20 17:42 / 2214人閱讀

摘要：獲得頁面上某個元素在視口坐標系的位置和元素的尺寸以上方法返回一個對象，包含六個元素，分別是此元素左上角和右下角的坐標，以及元素的寬和高。

1: 獲得頁面上某個元素在視口坐標系的位置和元素的尺寸：

element.getBoundingClientRect():

{    
    left:8
    top:104
    right:1432
    bottom: 158
    width:1424
    height:54   
}

以上方法返回一個對象，包含六個元素，分別是此元素左上角和右下角的坐標，以及元素的寬和高。但是在原始的IE中并不返回width和height, 不過可以自己通過坐標計算出來。
值得注意的是getBoundingClientRect()不是實時的，在調用此函數后，用戶再滾動或者改變瀏覽器窗口大小，它返回的值并不會更新。

針對所有的文檔元素，它們都定義了三組變量跟尺寸和位置有關：

1: 包含border的尺寸

offsetWidth//返回包含border在內的寬度
offsetHeight//返回包含border在內的高度
offsetTop//元素與其offsetParent之間的垂直距離
offsetLeft//元素與其offsetParent之間的水平距離
offsetParent//

2: 不包含border的尺寸

clientWidth//返回不包含border在內的寬度
clientHeight//返回不包含border在內的高度
clientLeft//
clientTop//

3: 元素的滾動條

scrollWidth//對于可滾動的元素（overflow:scroll）的元素，返回元素內容的寬度
scrollHeight//對于可滾動的元素（overflow:scroll）的元素，返回元素內容的高度
scrollLeft//對于可滾動的元素（overflow:scroll）的元素，返回/設置元素的滾動條向右邊滾動的px
scrollTop//overflow:scroll）的元素，返回/設置元素的滾動條向下邊滾動的px

云服務器 GPU云服務器 dom元素位置 javascript的dom對象 javascript的dom編程 DOM元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83803.html

前端性能優化（JavaScript補充篇）

摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...

molyzzx 2019-08-19 14:42 評論0 收藏0
前端性能優化（JavaScript補充篇）

摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...

taoszu 2019-08-01 14:38 評論0 收藏0
【前端性能優化】高性能JavaScript整理總結

摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。高性能JavaScript整理總結關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...

zzbo 2019-08-02 16:01 評論0 收藏0
【前端性能優化】高性能JavaScript整理總結

摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。高性能JavaScript整理總結關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...

bovenson 2019-08-22 15:41 評論0 收藏0