資訊專欄INFORMATION COLUMN
摘要：獲得頁面上某個元素在視口坐標(biāo)系的位置和元素的尺寸以上方法返回一個對象，包含六個元素，分別是此元素左上角和右下角的坐標(biāo)，以及元素的寬和高。
1: 獲得頁面上某個元素在視口坐標(biāo)系的位置和元素的尺寸：
element.getBoundingClientRect():
{
left:8
top:104
right:1432
bottom: 158
width:1424
height:54
}
以上方法返回一個對象，包含六個元素，分別是此元素左上角和右下角的坐標(biāo)，以及元素的寬和高。但是在原始的IE中并不返回width和height, 不過可以自己通過坐標(biāo)計算出來。
值得注意的是getBoundingClientRect()不是實(shí)時的，在調(diào)用此函數(shù)后，用戶再滾動或者改變?yōu)g覽器窗口大小，它返回的值并不會更新。
針對所有的文檔元素，它們都定義了三組變量跟尺寸和位置有關(guān)：
1: 包含border的尺寸
offsetWidth//返回包含border在內(nèi)的寬度 offsetHeight//返回包含border在內(nèi)的高度 offsetTop//元素與其offsetParent之間的垂直距離 offsetLeft//元素與其offsetParent之間的水平距離 offsetParent//
2: 不包含border的尺寸
clientWidth//返回不包含border在內(nèi)的寬度 clientHeight//返回不包含border在內(nèi)的高度 clientLeft// clientTop//
3: 元素的滾動條
scrollWidth//對于可滾動的元素（overflow:scroll）的元素，返回元素內(nèi)容的寬度 scrollHeight//對于可滾動的元素（overflow:scroll）的元素，返回元素內(nèi)容的高度 scrollLeft//對于可滾動的元素（overflow:scroll）的元素，返回/設(shè)置元素的滾動條向右邊滾動的px scrollTop//overflow:scroll）的元素，返回/設(shè)置元素的滾動條向下邊滾動的px
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83803.html
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強(qiáng)迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負(fù)擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強(qiáng)迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負(fù)擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要：然后執(zhí)行環(huán)境會創(chuàng)建一個活動對象，活動對象作為函數(shù)運(yùn)行的變量對象，包含所有局部變量命名參數(shù)參數(shù)集合和，當(dāng)執(zhí)行環(huán)境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結(jié) 關(guān)于前端性能優(yōu)化：首先想到的是雅虎軍規(guī)34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規(guī)有很多相似之處有不當(dāng)之...
摘要：然后執(zhí)行環(huán)境會創(chuàng)建一個活動對象，活動對象作為函數(shù)運(yùn)行的變量對象，包含所有局部變量命名參數(shù)參數(shù)集合和，當(dāng)執(zhí)行環(huán)境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結(jié) 關(guān)于前端性能優(yōu)化：首先想到的是雅虎軍規(guī)34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規(guī)有很多相似之處有不當(dāng)之...
閱讀 2335·2019-08-30 15:56
閱讀 3163·2019-08-30 13:48
閱讀 1185·2019-08-30 10:52
閱讀 1554·2019-08-29 17:30
閱讀 479·2019-08-29 13:44
閱讀 3713·2019-08-29 12:53
閱讀 1181·2019-08-29 11:05
閱讀 2725·2019-08-26 13:24
