原生JS獲取元素的位置與尺寸實現(xiàn)方法
1、內高度、內寬度： 內邊距 + 內容框
clientWidth
clientHeight
2、外高度，外寬度： 邊框 + 內邊距 + 內容框
offsetWidth
offsetHeight
3、上邊框、左邊框
clientTop
clientLeft
4、元素的大小及其相對于視口的位置
getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距離
//width/height:邊框 + 內邊距 + 內容框
//top:元素的上邊界和父元素上邊界的距離
//left:元素的左邊界和父元素左邊界的距離
//right:元素的右邊界和父元素的左邊界的距離
//bottom:元素的下邊界和父元素上邊界的距離
5、上邊偏移量，左邊的偏移量
offsetTop
offsetLest
6、可視區(qū)域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
7、頁面的實際大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
8、窗口左上角 與 屏幕左上角的 距離
window.screenX、
window.screenY
9、屏幕寬高
window.screen.width
window.screen.height
10、屏幕可用寬高（去除任務欄）
window.screen.availWidth
window.screen.availHeight
11、窗口的內高度、內寬度（文檔顯示區(qū)域+滾動條）
window.innerWidth
window.innerHeight
12、窗口的外高度、外寬度
window.outerWidth
window.outerHeiht
以上這篇原生JS獲取元素的位置與尺寸實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
許多讀者認為我那本《JavaScript語言精髓與編程實踐》讀來辛苦，所以我一直想寫個簡單的讀本。索性，這次就寫個最簡單的吧。2008-10-10
這篇文章主要給大家介紹了關于JS如何將指定的某個字符全部轉換為其他字符的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
用js實現(xiàn)的記錄鼠標的軌跡并回放的效果，非常不錯。2010-04-04
這篇文章主要介紹了noscript 標簽 一個被忽視的重要標簽,需要的朋友可以參考下2023-03-03
在js中通過window.location.href控制頁面跳轉時，有時會跳轉至緩存頁面，并沒有真正去請求要跳轉的地址，導致頁面數(shù)據未能及時加載刷新。怎么解決呢？下面小編給大家解答下2016-10-10
這篇文章主要介紹了Nuxt v-bind綁定img src不顯示的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
FF沒有window.event對象。可以通過給函數(shù)的參數(shù)傳遞event對象。2011-01-01
這篇文章主要給大家介紹了如何通過30分鐘快速入門掌握ES6/ES2015的核心內容的相關資料，之前給大家介紹過基礎的一些內容，下面繼續(xù)來介紹一些其他的新特性，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-04-04
filter()創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素，這篇文章主要介紹了JavaScript數(shù)組filter方法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08