欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript獲取網(wǎng)頁寬高方法匯總

 更新時間：2015年07月19日 10:28:50   投稿：hebedich  
本文給大家匯總介紹了下javascript獲取網(wǎng)頁寬高的方法，以及各個瀏覽器下不同方法獲取到的值的對比，有需要的小伙伴可以參考下。

document.body.clientWidth - 網(wǎng)頁可見區(qū)域?qū)?br /> document.body.clientHeight - 網(wǎng)頁可見區(qū)域高

document.body.offsetWidth - 網(wǎng)頁可見區(qū)域?qū)?，包括邊線和滾動條的寬
document.body.offsetHeight - 網(wǎng)頁可見區(qū)域高，包括邊線和滾動條的高[FF,chrom下是整個頁面高，IE opera 下正常]

document.body.scrollWidth - 網(wǎng)頁總寬
document.body.scrollHeight - 網(wǎng)頁總高

document.body.scrollTop - 有滾動條的時候，向下拖動滾動條，上方不顯示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 瀏覽器窗口的內(nèi)部高度

window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

window.screenTop - 網(wǎng)頁正文部分上[網(wǎng)頁文檔的最上方距離屏幕最上方的距離，但FF不支持，Chrom,IE,Opera表現(xiàn)都不同，慎用]
window.screenLeft - 網(wǎng)頁正文部分左[網(wǎng)頁文檔的最左方距離屏幕最左方的距離，但FF不支持，Chrom,IE,Opera表現(xiàn)都不同，慎用]

window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的寬度

window.screen.availHeight - 可用工作區(qū)高度[整個屏幕但不包括下方任務(wù)欄]
window.screen.availWidth - 可用工作區(qū)寬度[整個屏幕的寬度]

window.screen.clorDepth - 屏幕色彩，常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持，其它不支持】

JavaScript 獲取頁面寬高的方法

<script>
function getInfo()
{
  var s = "";
  s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth;
  s += " 網(wǎng)頁可見區(qū)域高："+ document.body.clientHeight;
  s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
  s += " 網(wǎng)頁可見區(qū)域高："+ document.body.offsetHeight + " (包括邊線的寬)";
  s += " 網(wǎng)頁正文全文寬："+ document.body.scrollWidth;
  s += " 網(wǎng)頁正文全文高："+ document.body.scrollHeight;
  s += " 網(wǎng)頁被卷去的高(ff)："+ document.body.scrollTop;
  s += " 網(wǎng)頁被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 網(wǎng)頁被卷去的左："+ document.body.scrollLeft;
  s += " 網(wǎng)頁正文部分上："+ window.screenTop;
  s += " 網(wǎng)頁正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的寬："+ window.screen.width;
  s += " 屏幕可用工作區(qū)高度："+ window.screen.availHeight;
  s += " 屏幕可用工作區(qū)寬度："+ window.screen.availWidth;
  s += " 你的屏幕設(shè)置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕設(shè)置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

在我本地測試當中：
在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight

即可獲得，很簡單，很方便。
而在公司項目當中：
Opera仍然使用

document.body.clientWidth
document.body.clientHeight

可是IE和FireFox則使用

document.documentElement.clientWidth
document.documentElement.clientHeight

原來是W3C的標準在作怪啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 如果在頁面中添加這行標記的話

在IE中：

document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度

在FireFox中：

document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度

在Opera中： 

document.body.clientWidth ==> 可見區(qū)域?qū)挾?
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）


而如果沒有定義W3C的標準，則

IE為：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox為：

復(fù)制代碼 代碼如下:
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

Opera為：

復(fù)制代碼 代碼如下:
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關(guān)文章

  • JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】

    JS常見DOM節(jié)點操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】

    這篇文章主要介紹了JS常見DOM節(jié)點操作,結(jié)合實例形式分析了JavaScript針對DOM節(jié)點的創(chuàng)建 ，插入，刪除，復(fù)制，查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
    2018-05-05
  • javascript實現(xiàn)des解密加密全過程

    javascript實現(xiàn)des解密加密全過程

    這篇文章主要介紹了javascript 實現(xiàn)des解密加密的過程,需要的朋友可以參考下
    2014-04-04
  • js控制臺報錯Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決

    js控制臺報錯Uncaught TypeError: Cannot read p

    本文主要介紹了js控制臺報錯Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • js的表單操作 簡單計算器

    js的表單操作 簡單計算器

    javascript寫的簡單的加減乘除計算器，里面涉及到一些方法還是很實用的哦，新手不要錯過
    2011-12-12
  • IE中g(shù)etElementsByName()對有些元素?zé)o效的解決方案

    IE中g(shù)etElementsByName()對有些元素?zé)o效的解決方案

    這篇文章主要介紹了IE中g(shù)etElementsByName()對有些元素?zé)o效的解決方案,很簡單，很實用，需要的朋友可以參考下
    2014-09-09
  • 原生js制作簡單的數(shù)字鍵盤

    原生js制作簡單的數(shù)字鍵盤

    本文給大家分享的是使用原生的javascript實現(xiàn)簡單的數(shù)字鍵盤的小例子，代碼非常的簡單，有需要的小伙伴參考下吧。
    2015-04-04
  • JavaScript設(shè)計模式之單例模式原理與用法實例分析

    JavaScript設(shè)計模式之單例模式原理與用法實例分析

    這篇文章主要介紹了JavaScript設(shè)計模式之單例模式原理與用法,結(jié)合實例形式分析了單例模式的原理、命名空間的使用、閉包、惰性單例形式以及單例模式的基本應(yīng)用,需要的朋友可以參考下
    2018-07-07
  • 詳解JavaScript的內(nèi)置對象

    詳解JavaScript的內(nèi)置對象

    本文對JavaScript對象的屬性、對象的方法、對象的屬性、訪問對象屬性的語法進行了實例分析介紹，有需要的朋友可以看下
    2016-12-12
  • JS 組件系列之 bootstrap treegrid 組件封裝過程

    JS 組件系列之 bootstrap treegrid 組件封裝過程

    最近產(chǎn)品需要設(shè)計一套相對完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級關(guān)系，在表格里面展示層級關(guān)系，自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下
    2017-04-04
  • 原生JS實現(xiàn)簡單計算器功能

    原生JS實現(xiàn)簡單計算器功能

    這篇文章主要為大家詳細介紹了原生JS實現(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04

最新評論