原生js獲取瀏覽器窗口及元素寬高常用方法集合
窗口可視區(qū)域?qū)挾?/strong>： document.documentElement.clientWidth || document.body.clientWidth;
窗口可視區(qū)域高度： document.documentElement.clientHeight || document.body.clientHeight;
窗口可視區(qū)域?qū)挾?邊線和滾動(dòng)條： document.body.offsetWidth ;
窗口可視區(qū)域高度+邊線和滾動(dòng)條： document.body.offsetHeight ;
實(shí)際內(nèi)容的寬度： document.body.scrollWidth;
實(shí)際內(nèi)容的高度： document.body.scrollHeight;
滾動(dòng)條下拉被卷起來的距離：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
滾動(dòng)條側(cè)拉被卷起來的距離：document.body.scrollLeft || document.documentElement.scrollLeft ;
網(wǎng)頁正文部分上：window.screenTop;
網(wǎng)頁正文部分左：window.screenLeft;
元素的寬度：obj.offsetWidth;
元素的高度：obj.offsetHeight;
相對于父元素的上位移：obj.offsetTop;（在元素的包含元素不含滾動(dòng)條的情況下）
相對于父元素的左位移：obj.offsetLeft;（在元素的包含元素不含滾動(dòng)條的情況下）
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
- javascript窗口寬高,鼠標(biāo)位置,滾動(dòng)高度(詳細(xì)解析)
- JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 瀏覽器常用高寬的jquery插件
- js 獲取瀏覽器高度和寬度值(多瀏覽器)
- js獲取瀏覽器和屏幕的各種寬度高度
- js 獲取屏幕各種寬高的方法(瀏覽器兼容)
- javascript獲取設(shè)置div的高度和寬度兼容任何瀏覽器
- JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度(實(shí)現(xiàn)代碼)
- javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等
- JavaScript獲取當(dāng)前窗口內(nèi)的寬度和高度匯總
相關(guān)文章
微信小程序?qū)崿F(xiàn)客服功能(客服消息)的全過程
在最近做的微信小程序中需要實(shí)現(xiàn)一個(gè)自帶的客服功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)客服功能(客服消息)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
JavaScript使用64位浮點(diǎn)數(shù)表示數(shù)字（基于IEEE 754標(biāo)準(zhǔn)）,這導(dǎo)致某些十進(jìn)制數(shù)字在計(jì)算過程中出現(xiàn)精度丟失,所以本文給大家介紹了JavaScript數(shù)字精度丟失問題的解決方案,需要的朋友可以參考下2024-10-10
Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
這篇文章主要介紹了Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時(shí)你需要的某個(gè)功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地?cái)U(kuò)展JavaScript功能呢2012-04-04
JavaScript數(shù)學(xué)對象之?dāng)?shù)字進(jìn)制轉(zhuǎn)換
這篇文章主要為大家講解了JavaScript數(shù)學(xué)對象——數(shù)字進(jìn)制轉(zhuǎn)換的實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
微信小程序?qū)崿F(xiàn)音樂播放器實(shí)例完整流程
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)音樂播放器實(shí)例完整流程,通過本章的學(xué)習(xí),讀者能夠掌握小程序的基本交互邏輯的開發(fā),能夠運(yùn)用API來實(shí)現(xiàn)項(xiàng)目中的特定功能,學(xué)會(huì)解決開發(fā)過程中常見的問題,需要的朋友可以參考下2024-10-10
解決layui的form里的元素進(jìn)行動(dòng)態(tài)生成,驗(yàn)證失效的問題
今天小編就為大家分享一篇解決layui的form里的元素進(jìn)行動(dòng)態(tài)生成,驗(yàn)證失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中通過閉包解決只能取得包含函數(shù)中任何變量最后一個(gè)值的問題
JavaScript中解決閉包只能取得包含函數(shù)中任何變量最后一個(gè)值的問題2010-08-08
微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)方式
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10