C1:DOM 元素的尺寸和位置

NusterCache 發(fā)布于2019-08-30 13:55 / 2426人閱讀

摘要：元素的尺寸和位置元素的尺寸包括內(nèi)容區(qū)寬高不包括如果元素的是那么此時(shí)設(shè)置的就是該元素的也就是等于內(nèi)容區(qū)的寬高滾動(dòng)條。元素的位置使用我們可以得到元素相對于的位置。還有一種方法可以得到元素相對于最近定位的祖先元素的位置，就是使用和屬性。

DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight:

包括內(nèi)容區(qū)寬/高,padding,border,不包括margin.
如果元素的box-sizeing是border-box,那么此時(shí)設(shè)置的style.width/style.height就是該元素的offsetWidth/offsetHeight.也就是等于內(nèi)容區(qū)的寬/高 + padding + border + 滾動(dòng)條。

DOM.clientWidth/clientHeight:

包括內(nèi)容區(qū)寬/高，padding,不包括border 和margin.
在box-sizing:border-box的情況下，等于style.width/height - border的寬度。
這里還有另外一種換算方法：clientWidth/clientHeight = offsetWidth/height - border - 滾動(dòng)條的寬/高

DOM.scrollWidth/scrollHeight:

包括內(nèi)容區(qū)的寬/高，padding,以及子元素超出的寬/高，不包括border.
就是clientWidth / clientHeight 加上其子元素超出的寬/高。
box-sizing:border-box的情況也是一樣。
值得注意的是：這里 DOM的子元素超出部分 的計(jì)算隨著DOM的overflow的取值不同而略有不同。
如下：綠色盒子寬高100px,padding:20px;box-sizing:content-box里面有一個(gè)高度為200px的紅色盒子

當(dāng)綠色盒子的overflow為默認(rèn)值的時(shí)候，綠色盒子的scrollHeight = 上邊距 20px + 紅色盒子的高度 = 220px
當(dāng)綠色盒子的overflow屬性為auto,scroll,hidden中的任意一個(gè)的時(shí)候，其scrollHeight = 上邊距 + 下邊距 + 紅色盒子的高度 = 20 + 20 +200 = 240px

DOM.style.width/style.height:

返回style屬性中的width和height。這兩個(gè)值根據(jù)box-sizing 的取值不同所表示的范圍也不同。
使用DOM.style.width/height 這種方式只能取到行內(nèi)樣式，而取不到CSS樣式中的屬性值。更多時(shí)候，我們可能需要的是這個(gè)方法：
window.getComputedStyle(DOM) 返回一個(gè)DOM元素計(jì)算后的style對象。
當(dāng)box-sizing:content-box的時(shí)候，style.width/height = offsetWidth/height - 滾動(dòng)條的寬/高 - border - 內(nèi)邊距。
當(dāng)box-sizing :border-box的時(shí)候，style.width/height 就等于offsetWidth / offsetHeight

和的尺寸

的clientHeight 和clientWidth 永遠(yuǎn)等于viewport - 滾動(dòng)條的寬度/高度（移動(dòng)端除外）,不論box-sizing的取值是什么。
的尺寸計(jì)算方式和普通的DOM元素是一樣的。

Element.getBoundingClientRect()

返回一個(gè)DOMRect對象，包含left ,top,width,height 四個(gè)屬性的邊框集合

其中的left ,top 是相對于視口左上角而言的。如果元素滾動(dòng)了，left,top值也是變化的。width/height就是元素的盒子模型(border + padding + content + 滾動(dòng)條)的計(jì)算寬度和高度。對于html和body同樣適用。

DOM元素的位置

使用element.getBoundingClientRect()我們可以得到元素相對于viewport的位置。

還有一種方法可以得到元素相對于最近定位的祖先元素的位置，就是使用element.offsetTop和element.offsetLeft 屬性。

這里有另外一個(gè)可以得到元素相對于根元素（通常情況下根元素指的是視口）,根據(jù)element.offsetParent 一直向上查找，直到element.offsetParent == null。html,body的offsetParent都為null.

let current = element.offsetParent
let top = element.offsetTop
while(current){
    top = current.offsetTop 
    current = current.offsetParent
}

值得注意的是，element.offsetTop/offsetLeft的計(jì)算的是element元素外邊框到包含它的元素的內(nèi)邊框之間的距離。所以嚴(yán)格上來說，應(yīng)該還要依據(jù)情況加上邊框的寬度的。但是邊框一般不會很大，最多1px 2px，所以可以忽略。

click 事件中鼠標(biāo)指針的位置

在PC，移動(dòng)端的click事件中mouseEvent 都會包含以下信息：

e.clientX/e.clientY:

返回鼠標(biāo)指針相對與瀏覽器窗口客戶區(qū)的坐標(biāo)。

e.pageX/e.pageY:

返回鼠標(biāo)指針相對于整個(gè)文檔的坐標(biāo)。瀏覽器沒有滾動(dòng)條的時(shí)候，這個(gè)值和e.clientX/e.clientY 是一樣的。但是有滾動(dòng)條的時(shí)候，這個(gè)值就會比e.clientX/e.clientY大。

e.screenX/e.screenY

返回鼠標(biāo)指針相對于整個(gè)屏幕的坐標(biāo)。哪怕此時(shí)你的瀏覽器被你縮小了移動(dòng)到了角落，它的計(jì)算基準(zhǔn)都是物理屏幕的左上角。

e.offsetX/e.offsetY

返回鼠標(biāo)指針相對于e.target的坐標(biāo),這一點(diǎn)要區(qū)別于e.currentTarget。由于事件的冒泡，所以當(dāng)?shù)讓拥脑攸c(diǎn)擊事件冒泡到頂層的時(shí)候，在頂層事件處理函數(shù)中的event 對象中的offsetX/offsetY 還是相對于最初觸發(fā)的底層元素。
如果祖先元素有translate,scale貌似這個(gè)值獲取不對。。。
換一種方法獲取吧，e.clientX,e.clientY配合element.getBoundingClientRect()

function getOffset(e){
    let target = e.currentTarget
    let rect = target.getBoundingClientRect()
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    }
}

這樣子不管其祖先元素有沒有設(shè)置transform，都可以在點(diǎn)擊的時(shí)候獲得鼠標(biāo)指針位置相對于e.currentTarget的相對坐標(biāo)。

移動(dòng)端touch事件中一些關(guān)于位置的有用信息

移動(dòng)端的touch 事件我們也能得到許多類似的信息，這些信息存在e.touches 的touch對象中。

touch.screenX/touch.screenY:

返回相對于屏幕邊沿的坐標(biāo)。

touch.clientX/touch.clientY:

返回相對于viewport邊沿的坐標(biāo)。

touch.pageX/touch.pageY:

返回相對于文檔邊沿的坐標(biāo)。和clientX/clientY的區(qū)別跟上面差不多。
應(yīng)該來說，這三個(gè)值在移動(dòng)端很多時(shí)候都是相等的。

GPU云服務(wù)器云服務(wù)器 dom元素位置數(shù)組元素位置java js獲取元素位置 html 查元素位置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115629.html

發(fā)表評論

登陸后可評論

0條評論

NusterCache

男|高級講師

我要關(guān)注我要私信

TA的文章

Python的@裝飾器是干什么用的？

閱讀 1038·2021-11-23 09:51
BuyVM拉斯維加斯VPS簡單測試

閱讀 2365·2021-10-08 10:22
Nuxt 3 即將發(fā)布、layui 即將退出歷史舞臺 | 淘系前端架構(gòu)周刊 210927 期

閱讀 2657·2021-09-29 09:35
云主機(jī)怎么新建數(shù)據(jù)庫-云主機(jī)怎么配置環(huán)境？

閱讀 876·2021-09-22 15:20
CSS實(shí)現(xiàn)小圖標(biāo)

閱讀 2873·2019-08-30 15:53
C1:DOM 元素的尺寸和位置

閱讀 2427·2019-08-30 13:55
刷《一年半經(jīng)驗(yàn)，百度、有贊、阿里面試總結(jié)》·手記

閱讀 1113·2019-08-29 17:27
【每日一包0018】fecha

閱讀 2884·2019-08-29 17:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

C1:DOM 元素的尺寸和位置

相關(guān)文章