js中易弄混淆的"位置"相關屬性詳解
一.Dom對象屬性——距離
1.offsetLeft && offsetTop
offsetLeft //返回當前元素左邊界到其上級元素(offsetParent)的左邊界的距離【只讀】 offsetTop //返回當前元素上邊界到其上級元素(offsetParent)的上邊界的距離【只讀】
2. offsetWidth && offsetHeight
offsetWidth //返回元素的寬度,**包含邊框**【只讀】 offsetHeight //返回元素的高度,**包含邊框**【只讀】T
3.clientWidth && clientHeight
clientWidth //返回元素的高度,**【不】包含邊框** clientHeight //返回元素的寬度,**【不】包含邊框**
4.scrollTop && scrollLeft
scrollTop //返回匹配元素的滾動條的垂直位置 scrollLeft //返回匹配元素的滾動條的水平位置
5.offsetParent
offsetParent //返回元素的偏移容器,即當前容器偏移對應的父容器
二.Bom對象屬性——距離
1.width && height
screen.width //電腦屏幕的寬度 screen.height //電腦屏幕的高度
2.availWidth && availHeight
screen.availWidth //電腦屏幕的寬度【減去窗口工具條】 screen.availHeight //電腦屏幕的高度【減去窗口工具條】
三.Window對象屬性——距離
2.innerWidth && innerHeight
window.innerWidth //瀏覽器窗口的內(nèi)寬度 window.innerHeight //瀏覽器窗口的內(nèi)高度
四.Event對象屬性——坐標
1.offsetX && offsetY
offsetX //相對于元素的橫坐標 offsetY //相對于元素的縱坐標
2.clientX && clientY
clientX //相對于瀏覽器窗口的橫坐標 clientY //相對于瀏覽器窗口的縱坐標
3.pageX && pageY
pageX //相對于頁面的橫坐標 pageY //相對于頁面的縱坐標
4.screenX && screenY
screenX //相對于電腦屏幕的橫坐標 screenY //相對于電腦屏幕的縱坐標
【可以配合下面的圖來進行理解坐標】
總結
到此這篇關于js中易弄混淆的位置相關屬性的文章就介紹到這了,更多相關js位置相關屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
寫入cookie的JavaScript代碼庫 cookieLibrary.js
cookieLibrary.js 寫入cookie的JavaScript代碼庫,需要的朋友可以參考下。2009-10-10Javascript在IE或Firefox下獲取鼠標位置的代碼
由于Firefox和IE等瀏覽器之間對JS解釋的方式不一樣,F(xiàn)irefox下面獲取鼠標位置不能夠直接使用clientX來獲取。網(wǎng)上說的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼,思路都一樣,就是風格不同。2009-12-12JavaScript 實現(xiàn)同時選取多個時間段的方法
這篇文章主要介紹了JavaScript 實現(xiàn)同時選取多個時間段的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10document.open() 與 document.write()的區(qū)別
document.open() 與 document.write()的區(qū)別...2007-08-08js小數(shù)計算小數(shù)點后顯示多位小數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s小數(shù)計算小數(shù)點后顯示多位小數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05