DOM元素位置，滾動位置和鼠標(biāo)事件位置相關(guān)屬性函數(shù)總結(jié)

陳江龍發(fā)布于2019-08-21 17:35 / 2370人閱讀

摘要：前言前段時間經(jīng)常被這些參數(shù)搞混，在此總結(jié)一下，畫了一張圖，希望能對大家有所幫助相關(guān)元素的左邊距離可視窗口左邊的距離元素的右邊距離可視窗口左邊的距離元素的上邊距離可視窗口頂部的距離元素的下邊距離可視窗口頂部的距離元素的寬元素的高目前來看與相同

前言：前段時間經(jīng)常被這些參數(shù)搞混，在此總結(jié)一下，畫了一張圖，希望能對大家有所幫助

getBoundingClientRect相關(guān)

left 元素的左邊距離可視窗口左邊的距離

right 元素的右邊距離可視窗口左邊的距離

top 元素的上邊距離可視窗口頂部的距離

bottom 元素的下邊距離可視窗口頂部的距離

width 元素的寬

height 元素的高

x/y 目前來看與let/top相同

鼠標(biāo)相關(guān)事件位置屬性

screenX/screenY 鼠標(biāo)點擊位置距離屏幕左上角的位置

clientX/clentY 鼠標(biāo)點擊位置距離可視窗口左上角的位置

pageX/pageY 鼠標(biāo)點擊位置距離文檔左上角的位置

offsetX/offsetY 鼠標(biāo)點擊位置距離當(dāng)前元素的邊框內(nèi)的位置

layerX/layerY 鼠標(biāo)點擊位置距離當(dāng)前元素的距離最近的非static的元素的位置

注：此圖來自網(wǎng)上

滾動相關(guān)

scrollTop 元素垂直方向被卷去的像素的距離

scrollLeft 元素水平方向被卷去的像素的距離

window.scrollX(window.pageXOffset) 文檔/頁面水平方向滾動的像素值

window.scrollY(window.pageYOffset) 文檔/頁面垂直方向滾動的像素值

scrollTo(xpos, ypos) 將內(nèi)容滾動到指定的坐標(biāo)

scrollBy(xnum, ynum) 將內(nèi)容向右下滾動的像素數(shù)

元素大小相關(guān)

offsetWidth=border+padding+width

offsetHeight=border+padding+height

clientWidth=padding+width-滾動條寬度

clientHeight=padding+height-滾動條寬度

scrollWidth=padding+包含內(nèi)容的完全寬度

scrollHeight=padding+包含內(nèi)容的完全高度

示例圖

GPU云服務(wù)器云服務(wù)器 dom元素位置鼠標(biāo)絕對位置鼠標(biāo)指針位置滾動位置

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

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

相關(guān)文章

JavaScript學(xué)習(xí)總結(jié)（九）事件詳解

摘要：布爾值表示捕獲階段調(diào)用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調(diào)函數(shù)。對象會被作為第一個參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。布爾默認(rèn)值是，當(dāng)設(shè)置成時用以取消事件的默認(rèn)行為與中的相同。其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當(dāng)時寫了一大堆，結(jié)果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補(bǔ)充下了，也正好給我的javascript學(xué)習(xí)總結(jié)做...

LiveVideoStack 2019-08-21 10:21 評論0 收藏0
JavaScript中的各種寬高以及位置總結(jié)

摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運(yùn)動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導(dǎo)致這些屬性間相互混淆，這里一一講解。文章轉(zhuǎn)自中的各種寬高以及位置總結(jié) 在javascript中操作dom節(jié)點讓其運(yùn)動的時候，常常會涉及到各種寬高以及位置坐標(biāo)等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運(yùn)動原理，同時...

microelec 2019-08-21 10:26 評論0 收藏0
JavaScript的組成結(jié)構(gòu)梳理

摘要：一是的核心規(guī)定了這門語言的數(shù)據(jù)語法結(jié)構(gòu)等基本概念。使用節(jié)點來把以及文檔描述成一個多層次的節(jié)點結(jié)構(gòu)。類型對象是其實例對象，是的屬性，表示整個頁面。和表示視窗的大小和表示改變視窗的方法。 JavaScript經(jīng)歷了殘酷的競爭，至今已經(jīng)統(tǒng)治了web世界，現(xiàn)在系統(tǒng)梳理一下相關(guān)的知識。 JavaScript可以分為三部分：ECMAScript、DOM和BOM。一、ECMAScript是Java...

dmlllll 2019-08-26 13:31 評論0 收藏0
原生js小結(jié)

摘要：獲得相應(yīng)的元素集合，返回數(shù)組。在前面增加刪除該節(jié)點中的某一個節(jié)點。將某一節(jié)點替換成新的節(jié)點。為節(jié)點，為節(jié)點，代表節(jié)點，代表節(jié)點，代表節(jié)點當(dāng)前節(jié)點為文本節(jié)點時的文本內(nèi)容節(jié)點的標(biāo)簽名。獲得該節(jié)點內(nèi)所有子節(jié)點的信息。很多時候小項目都不要使用jquery等類似的DOM封裝庫，需要自己簡單的封裝下，這就要求我們熟練地掌握原生的JavaScript的DOM操作，這里做個總結(jié) 高寬屬性對于win...

TerryCai 2019-08-20 16:42 評論0 收藏0
原生js小結(jié)

摘要：獲得相應(yīng)的元素集合，返回數(shù)組。在前面增加刪除該節(jié)點中的某一個節(jié)點。將某一節(jié)點替換成新的節(jié)點。為節(jié)點，為節(jié)點，代表節(jié)點，代表節(jié)點，代表節(jié)點當(dāng)前節(jié)點為文本節(jié)點時的文本內(nèi)容節(jié)點的標(biāo)簽名。獲得該節(jié)點內(nèi)所有子節(jié)點的信息。很多時候小項目都不要使用jquery等類似的DOM封裝庫，需要自己簡單的封裝下，這就要求我們熟練地掌握原生的JavaScript的DOM操作，這里做個總結(jié) 高寬屬性對于win...

yedf 2019-08-01 16:51 評論0 收藏0