js中易弄混淆的"位置"相關(guān)屬性詳解
更新時(shí)間：2022年04月24日 10:58:54 作者：April_zk
js中有各種位置相關(guān)的屬性,平時(shí)用起來(lái)比較混亂,特此整理一下,下面這篇文章主要給大家介紹了關(guān)于js中易弄混淆的“位置”相關(guān)屬性的相關(guān)資料,需要的朋友可以參考下
一.Dom對(duì)象屬性——距離
1.offsetLeft && offsetTop
offsetLeft //返回當(dāng)前元素左邊界到其上級(jí)元素(offsetParent)的左邊界的距離【只讀】 offsetTop //返回當(dāng)前元素上邊界到其上級(jí)元素(offsetParent)的上邊界的距離【只讀】
2. offsetWidth && offsetHeight
offsetWidth //返回元素的寬度，**包含邊框**【只讀】 offsetHeight //返回元素的高度，**包含邊框**【只讀】T
3.clientWidth && clientHeight
clientWidth //返回元素的高度，**【不】包含邊框** clientHeight //返回元素的寬度，**【不】包含邊框**
4.scrollTop && scrollLeft
scrollTop //返回匹配元素的滾動(dòng)條的垂直位置 scrollLeft //返回匹配元素的滾動(dòng)條的水平位置
5.offsetParent
offsetParent //返回元素的偏移容器，即當(dāng)前容器偏移對(duì)應(yīng)的父容器
二.Bom對(duì)象屬性——距離
1.width && height
screen.width //電腦屏幕的寬度 screen.height //電腦屏幕的高度
2.availWidth && availHeight
screen.availWidth //電腦屏幕的寬度【減去窗口工具條】 screen.availHeight //電腦屏幕的高度【減去窗口工具條】
三.Window對(duì)象屬性——距離
2.innerWidth && innerHeight
window.innerWidth //瀏覽器窗口的內(nèi)寬度 window.innerHeight //瀏覽器窗口的內(nèi)高度
四.Event對(duì)象屬性——坐標(biāo)
1.offsetX && offsetY
offsetX //相對(duì)于元素的橫坐標(biāo) offsetY //相對(duì)于元素的縱坐標(biāo)
2.clientX && clientY
clientX //相對(duì)于瀏覽器窗口的橫坐標(biāo) clientY //相對(duì)于瀏覽器窗口的縱坐標(biāo)
3.pageX && pageY
pageX //相對(duì)于頁(yè)面的橫坐標(biāo) pageY //相對(duì)于頁(yè)面的縱坐標(biāo)
4.screenX && screenY
screenX //相對(duì)于電腦屏幕的橫坐標(biāo) screenY //相對(duì)于電腦屏幕的縱坐標(biāo)
【可以配合下面的圖來(lái)進(jìn)行理解坐標(biāo)】
總結(jié)
到此這篇關(guān)于js中易弄混淆的位置相關(guān)屬性的文章就介紹到這了,更多相關(guān)js位置相關(guān)屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
想必大家對(duì)base64并不陌生吧，在本文將為大家介紹下Js中的base64加密解密過(guò)程，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
這篇文章主要介紹了非常平滑的JS圖片滾動(dòng)特效代碼，無(wú)縫循環(huán)，速度可自定義，大家參考使用吧2014-01-01
javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡(jiǎn)單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了js制作簡(jiǎn)易年歷的方法,包括實(shí)現(xiàn)的思路以及js、css與html各個(gè)部分的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-01-01
微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片滾動(dòng)效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件的圖片滾動(dòng)效果相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
本篇文章主要是對(duì)動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
uniapp小程序?qū)崙?zhàn)之利用騰訊地圖獲取定位
使用uniapp是因?yàn)樗且粋€(gè)使用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫一套代碼,可以發(fā)布到ios,android,web以及各種小程序,快應(yīng)用等多個(gè)平臺(tái),下面這篇文章主要給大家介紹了關(guān)于uniapp小程序?qū)崙?zhàn)之利用騰訊地圖獲取定位的相關(guān)資料,需要的朋友可以參考下2023-02-02
TypeScript使用函數(shù)重載確定返回類型的實(shí)現(xiàn)方法
這篇文章主要介紹了TypeScript使用函數(shù)重載確定返回類型的實(shí)現(xiàn)方法，文中通過(guò)代碼示例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
js函數(shù)的引用， 關(guān)于內(nèi)存的開(kāi)銷
函數(shù)的引用， 對(duì)于內(nèi)存的開(kāi)銷分析，需要的朋友可以參考下2012-09-09
JS雙向鏈表實(shí)現(xiàn)與使用方法示例(增加一個(gè)previous屬性實(shí)現(xiàn))
這篇文章主要介紹了JS雙向鏈表實(shí)現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個(gè)previous屬性實(shí)現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01