js中各種位置

nicercode 發(fā)布于2019-08-23 14:51 / 3367人閱讀

摘要：中各種位置中有各種與位置相關(guān)的屬性每次看到的時(shí)候都各種懵逼。內(nèi)容可視區(qū)域的高度。對(duì)于的元素，這個(gè)屬性一直是，單位，只讀元素。標(biāo)準(zhǔn)事件和事件都定義了這兩個(gè)屬性

js中各種位置

js中有各種與位置相關(guān)的屬性,每次看到的時(shí)候都各種懵逼。索性一次總結(jié)一下。
clientHeight

內(nèi)容可視區(qū)域的高度。包括padding不包括border、水平滾動(dòng)條、margin。對(duì)于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。

offsetHeight

offsetHeight = clientHeight + border + 滾動(dòng)條。對(duì)于inline的元素，這個(gè)屬性一直是0，單位px，只讀元素。

scrollHieght

當(dāng)子元素的高度比本元素高,且overflow不等于hidden時(shí),scrollHeight就是網(wǎng)頁(yè)實(shí)際內(nèi)容的高度。包括可視區(qū)域和被滾動(dòng)條隱藏的區(qū)域。

clientWidth
offsetWidth
scrollWidth

同height

clientTop

元素上邊框的厚度,當(dāng)沒(méi)有指定時(shí),一般為0

offsetTop

元素距離父元素頂端的高度

scrollTop

滾動(dòng)條被隱藏部分的高度,一般用來(lái)計(jì)算向下滾動(dòng)多少像素

clientLeft
offsetLeft
scrollLeft

同top

event.clientX
event.clientY

相對(duì)于窗口可視區(qū)域的X,Y坐標(biāo),可視區(qū)域不包括工具欄和滾動(dòng)條。

event.pageX
event.pageY

類似于event.pageX、event.pageY,但他們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。這兩個(gè)屬性不是標(biāo)準(zhǔn)屬性，但得到廣泛支持。
event.pageX = event.clientX + 橫向滾動(dòng)條距離。

event.offsetX
event.offsetY

鼠標(biāo)相對(duì)于事件源元素(target)的X,Y坐標(biāo)，只有IE事件有這兩個(gè)屬性，標(biāo)準(zhǔn)事件沒(méi)有對(duì)應(yīng)的屬性

screenX
screenY

鼠標(biāo)相對(duì)于用戶顯示器左上角的X,Y坐標(biāo)。標(biāo)準(zhǔn)事件和IE事件都定義了這兩個(gè)屬性

GPU云服務(wù)器云服務(wù)器 js 中各種數(shù)據(jù)類型的比較 js中獲取元素位置 js中變量的存儲(chǔ)位置 java中各種布局

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

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

相關(guān)文章

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
‘純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫(huà)按鈕’的js體驗(yàn)優(yōu)化

摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫(huà)，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫(huà)，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今...

genefy 2019-08-29 17:02 評(píng)論0 收藏0
‘純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫(huà)按鈕’的js體驗(yàn)優(yōu)化

摘要：前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫(huà)，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今天我們來(lái)解決這個(gè)問(wèn)題。前言在上一篇，我們已經(jīng)實(shí)現(xiàn)了用純css實(shí)現(xiàn)水滴擴(kuò)散動(dòng)畫(huà)，但是有一些瑕疵，文章結(jié)尾處也提到過(guò)，一是頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫(huà)運(yùn)動(dòng)一次，二是點(diǎn)擊的時(shí)候不能根據(jù)鼠標(biāo)的位置來(lái)擴(kuò)散，今...

xiaoqibTn 2019-08-23 12:28 評(píng)論0 收藏0
HTML元素和事件對(duì)象中的各種寬高和位置

摘要：元素和事件對(duì)象中的各種寬高和位置標(biāo)簽經(jīng)常被一堆的弄混，統(tǒng)一整理一下。元素中的寬高和位置屬性表示元素的內(nèi)部寬度，以像素計(jì)。表示元素實(shí)際占用的高度，包括其邊框，內(nèi)邊距和元素內(nèi)容。 HTML元素和事件對(duì)象中的各種寬高和位置標(biāo)簽： js [TOC] 經(jīng)常被一堆的xxxWidth,xxxLeft弄混，統(tǒng)一整理一下。 1. HTML元素中的寬高和位置屬性 clientWidth 表示元素的內(nèi)...

gggggggbong 2019-08-22 10:40 評(píng)論0 收藏0
Node.js學(xué)習(xí)之路08——fs文件系統(tǒng)之stream流的基本介紹

摘要：中各種用于讀取數(shù)據(jù)的對(duì)象對(duì)象描述用于讀取文件代表客戶端請(qǐng)求或服務(wù)器端響應(yīng)代表一個(gè)端口對(duì)象用于創(chuàng)建子進(jìn)程的標(biāo)準(zhǔn)輸出流。如果子進(jìn)程和父進(jìn)程共享輸入輸出流，則子進(jìn)程的標(biāo)準(zhǔn)輸出流被廢棄用于創(chuàng)建子進(jìn)程的標(biāo)準(zhǔn)錯(cuò)誤輸出流。 9. stream流 fs模塊中集中文件讀寫(xiě)方法的區(qū)別用途使用異步方式使用同步方式將文件完整讀入緩存區(qū) readFile readFileSync 將文件部...

BoYang 2019-08-22 14:47 評(píng)論0 收藏0