當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS: 关于元素大小和距离的有关的属性总结

發(fā)布時(shí)間：2025/6/15 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS: 关于元素大小和距离的有关的属性总结小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

Element的屬性中關(guān)于距離的屬性

偏移量

offsetHeight：元素在垂直方向上所占空間的大小，包括(上下邊框和水平滾動(dòng)條的高度,不包括外邊距) offsetWidth：元素在水平方向上所占空間的大小，包括(左右邊框和垂直滾動(dòng)條的寬度) offsetLeft：元素的左外邊框與包含元素的左內(nèi)邊框的距離 offsetTop：元素的上外邊框與包含元素的上內(nèi)邊框的距離 offsetparent：距離元素最近的并且具有大小的元素

如果想知道某個(gè)元素在頁(yè)面上的偏移量，只需要將這個(gè)元素的offsetTop或者offsetLeft與offsetparent的相同屬性相加，不斷迭代至根元素，就可以得到基本準(zhǔn)確的值。

客戶(hù)區(qū)大小

clientWidth：元素左內(nèi)邊框到元素右內(nèi)邊框的距離(內(nèi)容區(qū)加內(nèi)邊距) clientHeight：元素上內(nèi)邊框到元素下內(nèi)邊框的距離(同上)

指的元素內(nèi)容以及元素內(nèi)邊距所占空間的大小

滾動(dòng)大小

scrollHeight：沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度(內(nèi)容區(qū)加內(nèi)邊距) scrollWidth：沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總寬度(同上) scrollLeft：被隱藏在元素內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)，通過(guò)設(shè)置這個(gè)可以改變?cè)氐臐L動(dòng)位置 scrollTop：被隱藏在元素內(nèi)容區(qū)域上方的像素?cái)?shù)，通過(guò)設(shè)置這個(gè)可以改變?cè)氐臐L動(dòng)位置

帶有垂直滾動(dòng)條的頁(yè)面中，document.documentElement.scrollHeight就是頁(yè)面內(nèi)容區(qū)總高度，在沒(méi)有滾動(dòng)條的頁(yè)面中，則document.documentElement.scrollHeight指定的值隨瀏覽器不確定，在chrome中，document.documentElement.scrollHeight指的是視口高度，document.documentElement.scrollWidth指的是視口寬度。

我用chrome測(cè)試了一下，發(fā)現(xiàn)scrollHeight和offsetHeight好像一直是相同的值。

DOMRect

bottom:1028 height:1020 left:8 right:928 top:8 width:920 x:8 y:8

在元素中調(diào)用getBoundingClientRect()會(huì)返回含有以上參數(shù)的DOMRect對(duì)象，top,bottom表示元素上/下內(nèi)邊框到視口頂端距離，left和right表示元素左/右內(nèi)邊框到視口左端距離。感覺(jué)這個(gè)api很方便，以后就用它了。

event中關(guān)于距離屬性

當(dāng)觸發(fā)鼠標(biāo)事件的時(shí)候，事件對(duì)象會(huì)有一些屬性幫助定位鼠標(biāo)指針

客戶(hù)區(qū)坐標(biāo)位置

clientX:鼠標(biāo)指針在視口中的水平坐標(biāo) clientY:鼠標(biāo)指針在視口中的垂直坐標(biāo)

屏幕坐標(biāo)位置

screenX:鼠標(biāo)指針在屏幕(桌面)中的水平坐標(biāo) screenY:鼠標(biāo)指針在屏幕中的垂直坐標(biāo)

偏移量

offsetX:光標(biāo)相對(duì)于目標(biāo)元素(event.target指向的元素；觸發(fā)該事件的元素)邊界(內(nèi)邊框)的x坐標(biāo) offsetY:光標(biāo)相對(duì)于目標(biāo)元素邊界的y坐標(biāo)

當(dāng)光標(biāo)指針在目標(biāo)元素的內(nèi)邊框之外，外外邊距之內(nèi)的時(shí)候，offsetX/Y為負(fù)值。

轉(zhuǎn)載于:https://my.oschina.net/u/3400107/blog/1840526

總結(jié)

以上是生活随笔為你收集整理的JS: 关于元素大小和距离的有关的属性总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。