原生JS獲取元素的位置與尺寸實現(xiàn)方法

更新時間：2017年10月18日 09:01:28 作者：mx_漫步云間

下面小編就為大家?guī)硪黄鶭S獲取元素的位置與尺寸實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、內(nèi)高度、內(nèi)寬度：內(nèi)邊距 + 內(nèi)容框

clientWidth
clientHeight

2、外高度，外寬度：邊框 + 內(nèi)邊距 + 內(nèi)容框

offsetWidth
offsetHeight

3、上邊框、左邊框

clientTop
clientLeft

4、元素的大小及其相對于視口的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距離
//width/height:邊框 + 內(nèi)邊距 + 內(nèi)容框
//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、屏幕可用寬高（去除任務(wù)欄）

window.screen.availWidth
window.screen.availHeight

11、窗口的內(nèi)高度、內(nèi)寬度（文檔顯示區(qū)域+滾動條）

window.innerWidth
window.innerHeight

12、窗口的外高度、外寬度

window.outerWidth
window.outerHeiht

以上這篇原生JS獲取元素的位置與尺寸實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

無廢話JavaScript教程(全集)
許多讀者認(rèn)為我那本《JavaScript語言精髓與編程實踐》讀來辛苦，所以我一直想寫個簡單的讀本。索性，這次就寫個最簡單的吧。
2008-10-10
JS將指定的某個字符全部轉(zhuǎn)換為其他字符實例代碼
這篇文章主要給大家介紹了關(guān)于JS如何將指定的某個字符全部轉(zhuǎn)換為其他字符的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
記錄鼠標(biāo)的軌跡并回放的js代碼
用js實現(xiàn)的記錄鼠標(biāo)的軌跡并回放的效果，非常不錯。
2010-04-04
noscript 標(biāo)簽一個被忽視的重要標(biāo)簽
這篇文章主要介紹了noscript 標(biāo)簽一個被忽視的重要標(biāo)簽,需要的朋友可以參考下
2023-03-03
JS控制頁面跳轉(zhuǎn)時未請求要跳轉(zhuǎn)的地址怎么回事
在js中通過window.location.href控制頁面跳轉(zhuǎn)時，有時會跳轉(zhuǎn)至緩存頁面，并沒有真正去請求要跳轉(zhuǎn)的地址，導(dǎo)致頁面數(shù)據(jù)未能及時加載刷新。怎么解決呢？下面小編給大家解答下
2016-10-10
Nuxt v-bind綁定img src不顯示的解決
這篇文章主要介紹了Nuxt v-bind綁定img src不顯示的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Js event事件在IE、FF兼容性問題
FF沒有window.event對象?？梢酝ㄟ^給函數(shù)的參數(shù)傳遞event對象。
2011-01-01
30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容（下）
這篇文章主要給大家介紹了如何通過30分鐘快速入門掌握ES6/ES2015的核心內(nèi)容的相關(guān)資料，之前給大家介紹過基礎(chǔ)的一些內(nèi)容，下面繼續(xù)來介紹一些其他的新特性，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
JavaScript數(shù)組filter方法
filter()創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素，這篇文章主要介紹了JavaScript數(shù)組filter方法,需要的朋友可以參考下
2022-12-12
JavaScript防抖案例講解
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08