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

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

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

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

getBoundingClientRect相關(guān)

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

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

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

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

width 元素的寬

height 元素的高

x/y 目前來(lái)看與let/top相同

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

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

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

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

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

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

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

滾動(dòng)相關(guān)

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

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

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

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

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

scrollBy(xnum, ynum) 將內(nèi)容向右下滾動(dòng)的像素?cái)?shù)

元素大小相關(guān)

offsetWidth=border+padding+width

offsetHeight=border+padding+height

clientWidth=padding+width-滾動(dòng)條寬度

clientHeight=padding+height-滾動(dòng)條寬度

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

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

示例圖

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/89713.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

yedf 2019-08-01 16:51 評(píng)論0 收藏0