資訊專欄INFORMATION COLUMN
摘要：前者計(jì)算元素的大小后者兩者返回元素相對(duì)元素的偏移量返回一個(gè)元素的布局寬度計(jì)算方式設(shè)定的如果存在垂直滾動(dòng)條返回一個(gè)元素的布局高度計(jì)算方式設(shè)定的如果存在水平滾動(dòng)條大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的計(jì)算方式也是一樣下面我們來
offsetWidth、Height、Top、Left 、offsetParent
前者計(jì)算元素的大小, 后者兩者返回元素相對(duì) offsetParent 元素的偏移量.
offsetWidth返回一個(gè)元素的布局寬度;
計(jì)算方式:
content width(CSS設(shè)定的width) + padding + border + scrollBarWidth 如果存在垂直滾動(dòng)條(scrollbar)offsetHeight
返回一個(gè)元素的布局高度;
計(jì)算方式:
content height(CSS設(shè)定的height) + padding + border + scrollbarHeight 如果存在水平滾動(dòng)條(scrollbar)
大家看到 content + padding + border 是否很熟悉, 在盒子模型中提及, 在IE盒模型中,其盒子大小的計(jì)算方式也是一樣.
下面我們來看看 offsetTop、offsetLeft 在了解它們兩之前,先來了解下 offsetParent
offsetParent可以理解為偏移的基準(zhǔn), 這有點(diǎn)類似定位屬性中(absolute以最近的祖先元素容器且設(shè)置了定位屬性的元素來進(jìn)行位置偏移.)
什么樣的元素為 offsetParent ?
擁有定位屬性的元素
dispaly 為 table 或 table cell
默認(rèn)情況下根元素
依次從內(nèi)往外找, 如果沒有, 默認(rèn)就是已根元素作為 offsetParent 也就是偏移的基準(zhǔn).
當(dāng)元素設(shè)置屬性 display: none, 則它相應(yīng)的 offsetParent屬性返回值為 null.
注意:
如果元素為隱藏的（該元素或其祖先元素的 style.display 為 "none"）,或者該元素的 style.position 被設(shè)為 "fixed", 則該 offsetParent 屬性返回 null。在 IE 9 中 display:none 無影響.
offsetLeft返回一個(gè)元素(border邊框)到 offsetParent 元素左邊界(邊界可能為邊框或內(nèi)邊距)的距離.offsetTop
返回一個(gè)元素(border邊框)到 offsetParent 元素上邊界(邊界可能為邊框或內(nèi)邊距)的距離.
下面我們來實(shí)戰(zhàn)一下吧
這里分兩種情況:
當(dāng)不存在定位屬性時(shí)： IE、Edge、Chrome、Firefix 呈現(xiàn)值不一樣:
IE、Edge 中:
offsetLeft = box margin + body padding + body border + body margin + html padding + html border + html margin
可以理解為相對(duì)于視口的偏移
Chrome 中:
offsetLeft = box margin + body padding + body border + html padding + html border
可以理解為相對(duì)于HTML元素邊框(包含邊框)
Firefix 中:
offsetLeft = box margin + body padding + body border + html padding
可以理解為相對(duì)于HTML元素邊框(不包含邊框).
其實(shí)這里我是有疑問的, 為什么沒有指定定位等屬性情況下, ele.offsetParent === document.body 卻為 true , 從結(jié)果來看實(shí)際偏移計(jì)算又是依據(jù)HTML或視口來的 , 如果有知道可以告知下.
當(dāng)存在定位屬性時(shí), 更改下HTML代碼, 如下:
IE、Edge、Firefox 中:
offsetLeft = box margin + body padding + body border + html padding
可以理解為相對(duì)于HTML邊框偏移量(不包含邊框)
Chrome 中:
offsetLeft = box margin + body padding + body border + html padding + html border
可以理解為相對(duì)于HTML邊框偏移量(含邊框)
如果不存在邊框的話,在IE、Edge、Chrome、Firefox呈現(xiàn)方式一樣的.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104791.html
摘要：前者計(jì)算元素的大小后者兩者返回元素相對(duì)元素的偏移量返回一個(gè)元素的布局寬度計(jì)算方式設(shè)定的如果存在垂直滾動(dòng)條返回一個(gè)元素的布局高度計(jì)算方式設(shè)定的如果存在水平滾動(dòng)條大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的計(jì)算方式也是一樣下面我們來 offsetWidth、Height、Top、Left 、offsetParent 前者計(jì)算元素的大小, 后者兩者返回元素相對(duì) offsetPar...
摘要：前者計(jì)算元素的大小后者兩者返回元素相對(duì)元素的偏移量返回一個(gè)元素的布局寬度計(jì)算方式設(shè)定的如果存在垂直滾動(dòng)條返回一個(gè)元素的布局高度計(jì)算方式設(shè)定的如果存在水平滾動(dòng)條大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的計(jì)算方式也是一樣下面我們來 offsetWidth、Height、Top、Left 、offsetParent 前者計(jì)算元素的大小, 后者兩者返回元素相對(duì) offsetPar...
摘要：因?yàn)橐坏┪覀兘o父元素設(shè)置了會(huì)影響文檔流。是指當(dāng)前元素相對(duì)于父級(jí)參照物的偏移量。在標(biāo)準(zhǔn)瀏覽器中是指當(dāng)前元素的左邊框的外沿到父級(jí)參照物邊框的內(nèi)沿，如上圖中的，，所示。盒子上邊框的高度。 接下來我們依然討論盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent showImg(https://segme...
摘要：在這里一次性做個(gè)總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。 個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...
摘要：在這里一次性做個(gè)總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。 個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...
閱讀 3508·2023-04-26 02:00
閱讀 3100·2021-11-22 13:54
閱讀 1711·2021-08-03 14:03
閱讀 723·2019-08-30 15:52
閱讀 3102·2019-08-29 12:30
閱讀 2431·2019-08-26 13:35
閱讀 3377·2019-08-26 13:25
閱讀 3013·2019-08-26 11:39
