js中位置的相關屬性有哪些

今天小編給大家分享一下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      //瀏覽器窗口的內寬度
window.innerHeight     //瀏覽器窗口的內高度

四.Event對象屬性——坐標

1.offsetX && offsetY

offsetX      //相對于元素的橫坐標
offsetY      //相對于元素的縱坐標

2.clientX && clientY

clientX      //相對于瀏覽器窗口的橫坐標
clientY      //相對于瀏覽器窗口的縱坐標

3.pageX && pageY

pageX      //相對于頁面的橫坐標
pageY      //相對于頁面的縱坐標

4.screenX && screenY

screenX      //相對于電腦屏幕的橫坐標
screenY      //相對于電腦屏幕的縱坐標

【可以配合下面的圖來進行理解坐標】

以上就是“js中位置的相關屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。