一張圖搞懂clientWidth,offsetWidth,scrollHeight

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

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

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

除了這些還有clientX,pageX,screenX等等，再來看下下面的圖

下面介紹一下每個字段的含義

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

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

clientX、clientY
點擊位置距離當前body可視區(qū)域的x，y坐標

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

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

offsetWidth,offsetHeight
整個元素的尺寸(不包括因為滾動條變寬的寬度，包括滾動條的寬度和高度)

offsetX, offsetY
相對于帶有定位的父盒子的x，y坐標

scrollLeft,scrollTop
元素滾動的距離大小

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

pageX、pageY
對于整個頁面來說，包括了被卷去的body部分的長度

screenX、screenY
點擊位置距離當前電腦屏幕的x，y坐標

x、y
和screenX、screenY一樣

云服務器 GPU云服務器一張圖 python 一張圖一張圖 python 一張圖人工智能

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

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

瀏覽器的各種位置值獲取

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

lvzishen 2019-08-21 11:53 評論0 收藏0
【前端工程師手冊】前端應該知道的各種寬高

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

jayce 2019-08-22 18:45 評論0 收藏0
【前端工程師手冊】前端應該知道的各種寬高

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

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

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

wangbinke 2019-08-20 12:21 評論0 收藏0
關于網(wǎng)頁的寬&高

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

sumory 2019-08-29 14:08 評論0 收藏0