快捷導(dǎo)航

JS 獲取頁面尺寸的方法詳解

更新時(shí)間：2023年09月05日 08:35:06 作者：編程三昧

通過 JS 獲取頁面相關(guān)的尺寸是比較常見的操作,尤其是在動(dòng)態(tài)計(jì)算頁面布局時(shí),今天我們就來學(xué)習(xí)一下幾個(gè)獲取頁面尺寸的基本方法,需要的朋友可以參考下

獲取頁面高度

function getPageHeight() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}

獲取頁面scrollLeft

function getPageScrollLeft() {
  var a = document;
  return a.documentElement.scrollLeft || a.body.scrollLeft;
}

獲取頁面scrollTop

function getPageScrollTop() {
  var a = document;
  return a.documentElement.scrollTop || a.body.scrollTop;
}

獲取頁面可視寬度

function getPageViewWidth() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientWidth;
}

獲取頁面可視高度

function getPageViewHeight() {
  var d = document,
    a = d.compatMode == "BackCompat" ? d.body : d.documentElement;
  return a.clientHeight;
}

獲取頁面寬度

function getPageWidth() {
  var g = document,
    a = g.body,
    f = g.documentElement,
    d = g.compatMode == "BackCompat" ? a : g.documentElement;
  return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}

到此這篇關(guān)于JS 獲取頁面尺寸的方法詳解的文章就介紹到這了,更多相關(guān)JS獲取頁面尺寸內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹
現(xiàn)在，JavaScript的Getters和Setters使用非常廣泛，它和每個(gè)JavaScript開發(fā)者的切身利益息息相關(guān),我們先來快速了解什么是Getters和Setters，以及它們?yōu)槭裁春苡杏?然后，我們來看看現(xiàn)在都有哪些平臺(tái)支持Gettets和Setters
2012-12-12
Uniapp中使用Echarts的詳細(xì)過程
這篇文章主要介紹了Uniapp中使用Echarts的示例詳解這里只舉例折線圖，介紹了uni-app微信小程序使用echarts的方法,下載echart組件，可以先隨便建個(gè)文件夾，然后 npm init，接著下載依賴，需要的朋友可以參考下
2022-11-11
childNodes.length與children.length的區(qū)別
childNodes.length與children.length的值常不一樣。
2009-05-05
2026前端面試題及答案總結(jié)大全(最新版)
這篇文章主要介紹了2026前端面試題及答案總結(jié)的相關(guān)資料,通過示例代碼講解了HTML/CSS盒模型、CSS選擇器優(yōu)先級(jí)計(jì)算、塊級(jí)格式化上下文、JavaScript事件循環(huán)機(jī)制、ES6中變量聲明差異、Promise原理及實(shí)現(xiàn)、React與Vue響應(yīng)式機(jī)制與性能優(yōu)化手段等內(nèi)容,需要的朋友可以參考下
2026-06-06
改進(jìn)UCHOME的記錄發(fā)布，增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章，是關(guān)于SNS的用戶體驗(yàn)問題，發(fā)覺文中提到的第一個(gè)細(xì)節(jié)，UCHOME就做的不好，于是改進(jìn)了一下。
2011-01-01
uniapp微信小程序:key失效的解決方法
這篇文章主要介紹了uniapp微信小程序:key失效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
JS前端千萬級(jí)彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JS事件綁定的常用方式實(shí)例總結(jié)
這篇文章主要介紹了JS事件綁定的常用方式,結(jié)合實(shí)例形式總結(jié)分析了javascript三種常見的事件綁定原理與操作技巧,需要的朋友可以參考下
2019-03-03
JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
這篇文章主要介紹了JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法,涉及javascript鼠標(biāo)事件及頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
JavaScript數(shù)據(jù)類型轉(zhuǎn)換詳解（推薦）
眾所周知JavaScript是一門弱類型（語言，即變量的類型是不確定的。所以下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
2021-05-05