原生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中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析
這篇文章主要介紹了JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析,本文總結的淺顯易懂,非常好的一篇技術文章,需要的朋友可以參考下2015-03-03
怎么讓<textarea></textarea>之間包含的文本原封不動的顯示出來呢？下面小編就為大家介紹一下具體的實現(xiàn)方法吧2013-11-11
這篇文章主要介紹了js調出上下文菜單的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript實現(xiàn)在數(shù)組中查找不同順序排列的字符串
這篇文章主要介紹了JavaScript實現(xiàn)在數(shù)組中查找不同順序排列的字符串,本文用兩個方法解決了這道算法題,需要的朋友可以參考下2014-09-09
javascript事件函數(shù)中獲得事件源的兩種不錯方法
許多情況我們需要獲得事件源對象來對其屬性進行更改,在事件響應函數(shù)中獲得事件源的方法有如下兩種2014-03-03
這篇文章主要給大家介紹了關于JavaScript判斷數(shù)組方法的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-02-02
javascript 隨機數(shù) 與高級應用 附vbscript(asp) 隨機數(shù)總結
有時忘了程序的隨機數(shù)函數(shù)或javascript和vbscript的隨機數(shù)混亂了，特總結下兩者的隨機數(shù)函數(shù)，以備以后使用方便。2007-10-10
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本篇文章主要介紹了Javascript的面向對象，小編覺得這篇文章內容很不錯，需要的朋友可以看下，希望能夠給你帶來幫助2021-09-09
TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟
本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11