一張圖搞懂clientWidth,offsetWidth,scrollHeight

khs1994 發(fā)布于2019-08-23 13:52 / 1605人閱讀

摘要：由于前端經(jīng)常會(huì)遇到計(jì)算位置的問(wèn)題，那么搞懂等等這些就變得尤為重要。取決于邊框的像數(shù)值內(nèi)容區(qū)域的寬高，不包括邊框?qū)挾戎?。點(diǎn)擊位置距離當(dāng)前可視區(qū)域的，坐標(biāo)相對(duì)于最近的祖先定位元素。

由于前端經(jīng)常會(huì)遇到計(jì)算位置的問(wèn)題，那么搞懂clientWidth,offsetWidth,scrollHeight等等這些就變得尤為重要。放上經(jīng)典圖，一張圖讓你搞懂clientWidth,offsetWidth,scrollHeight~~~

除了這些還有clientX,pageX,screenX等等，再來(lái)看下下面的圖

下面介紹一下每個(gè)字段的含義

clientLeft,clientTop
表示內(nèi)容區(qū)域的左上角相對(duì)于整個(gè)元素左上角的位置（包括邊框）。(取決于邊框的像數(shù)值？)

clientWidth,clientHeight
內(nèi)容區(qū)域的寬高，不包括邊框?qū)挾戎怠?/p>

clientX、clientY
點(diǎn)擊位置距離當(dāng)前body可視區(qū)域的x，y坐標(biāo)

offsetLeft,offsetTop
相對(duì)于最近的祖先定位元素。

offsetParent
某元素的父元素例如：this.offsetParent.tagName.toLowerCase() 得到body...

offsetWidth,offsetHeight
整個(gè)元素的尺寸(不包括因?yàn)闈L動(dòng)條變寬的寬度，包括滾動(dòng)條的寬度和高度)

offsetX, offsetY
相對(duì)于帶有定位的父盒子的x，y坐標(biāo)

scrollLeft,scrollTop
元素滾動(dòng)的距離大小

scrollWidth,scrollHeight
整個(gè)內(nèi)容區(qū)域的寬度(包括需拉動(dòng)滾動(dòng)條隱藏起來(lái)的那些部分) scrollWidth = scrollTop+clientWidth

pageX、pageY
對(duì)于整個(gè)頁(yè)面來(lái)說(shuō)，包括了被卷去的body部分的長(zhǎng)度

screenX、screenY
點(diǎn)擊位置距離當(dāng)前電腦屏幕的x，y坐標(biāo)

x、y
和screenX、screenY一樣

GPU云服務(wù)器云服務(wù)器一張圖 python 一張圖一張圖 python 一張圖人工智能

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

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

相關(guān)文章

瀏覽器的各種位置值獲取

摘要：包括和屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁(yè)到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁(yè)元素的相對(duì)位置。另外，方法也有類似作用，可以使網(wǎng)頁(yè)元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁(yè)元素的位置那就是使用方法。就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。獲取網(wǎng)頁(yè)的大小一張網(wǎng)頁(yè)的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁(yè)面積。又叫做viewport...

lvzishen 2019-08-21 11:53 評(píng)論0 收藏0
【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性引子曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)...

jayce 2019-08-22 18:45 評(píng)論0 收藏0
【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性引子曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)...

Hujiawei 2019-08-30 15:54 評(píng)論0 收藏0
JavaScript中的各種寬高屬性

摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問(wèn)題對(duì)象的屬性引用的是對(duì)象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高。在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評(píng)論0 收藏0
關(guān)于網(wǎng)頁(yè)的寬&高

摘要：網(wǎng)頁(yè)當(dāng)前可見高寬和兩者分別返回網(wǎng)頁(yè)元素的總高度總寬度。網(wǎng)頁(yè)總高度網(wǎng)頁(yè)總寬度和兩者分別表示元素的水平滾動(dòng)條向右滾動(dòng)的像素值，以及垂直滾動(dòng)條向下滾動(dòng)的像素值。若網(wǎng)頁(yè)內(nèi)沒有滾動(dòng)條，則其值為。 1. Element.clientHeight和Element.clientWidth 兩者分別返回元素節(jié)點(diǎn) 可見部分的高度和寬度。此可見部分包括padding、但不包括border、margin和...

sumory 2019-08-29 14:08 評(píng)論0 收藏0