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