javascript获取网页宽高方法汇总

 更新时间:2015年07月19日 10:28:50   投稿:hebedich  
本文给大家汇总介绍了下javascript获取网页宽高的方法,以及各个浏览器下不同方法获取到的值的对比,有需要的小伙伴可以参考下。

document.body.clientWidth - 网页可见区域宽
document.body.clientHeight - 网页可见区域高

document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽
document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常]

document.body.scrollWidth - 网页总宽
document.body.scrollHeight - 网页总高

document.body.scrollTop - 有滚动条的时候,向下拖动滚动条,上方不显示的那部分高度
document.body.scrollLeft - 同上

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.screenTop - 网页正文部分上[网页文档的最上方距离屏幕最上方的距离,但FF不支持,Chrom,IE,Opera表现都不同,慎用]
window.screenLeft - 网页正文部分左[网页文档的最左方距离屏幕最左方的距离,但FF不支持,Chrom,IE,Opera表现都不同,慎用]

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

window.screen.availHeight - 可用工作区高度[整个屏幕但不包括下方任务栏]
window.screen.availWidth - 可用工作区宽度[整个屏幕的宽度]

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

JavaScript 获取页面宽高的方法

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽:"+ document.body.clientWidth;
  s += " 网页可见区域高:"+ document.body.clientHeight;
  s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽:"+ document.body.scrollWidth;
  s += " 网页正文全文高:"+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
  s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
  s += " 网页被卷去的左:"+ document.body.scrollLeft;
  s += " 网页正文部分上:"+ window.screenTop;
  s += " 网页正文部分左:"+ window.screenLeft;
  s += " 屏幕分辨率的高:"+ window.screen.height;
  s += " 屏幕分辨率的宽:"+ window.screen.width;
  s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ 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" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


而如果没有定义W3C的标准,则

IE为:

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

FireFox为:

复制代码 代码如下:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

复制代码 代码如下:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ,插入,删除,复制,查找等操作相关函数与使用技巧,需要的朋友可以参考下
    2018-05-05
  • javascript实现des解密加密全过程

    javascript实现des解密加密全过程

    这篇文章主要介绍了javascript 实现des解密加密的过程,需要的朋友可以参考下
    2014-04-04
  • js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决

    js控制台报错Uncaught TypeError: Cannot read p

    本文主要介绍了js控制台报错Uncaught TypeError: Cannot read properties of undefined (reading ‘appendChild‘)的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • js的表单操作 简单计算器

    js的表单操作 简单计算器

    javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
    2011-12-12
  • IE中getElementsByName()对有些元素无效的解决方案

    IE中getElementsByName()对有些元素无效的解决方案

    这篇文章主要介绍了IE中getElementsByName()对有些元素无效的解决方案,很简单,很实用,需要的朋友可以参考下
    2014-09-09
  • 原生js制作简单的数字键盘

    原生js制作简单的数字键盘

    本文给大家分享的是使用原生的javascript实现简单的数字键盘的小例子,代码非常的简单,有需要的小伙伴参考下吧。
    2015-04-04
  • JavaScript设计模式之单例模式原理与用法实例分析

    JavaScript设计模式之单例模式原理与用法实例分析

    这篇文章主要介绍了JavaScript设计模式之单例模式原理与用法,结合实例形式分析了单例模式的原理、命名空间的使用、闭包、惰性单例形式以及单例模式的基本应用,需要的朋友可以参考下
    2018-07-07
  • 详解JavaScript的内置对象

    详解JavaScript的内置对象

    本文对JavaScript对象的属性、对象的方法、对象的属性、访问对象属性的语法进行了实例分析介绍,有需要的朋友可以看下
    2016-12-12
  • JS 组件系列之 bootstrap treegrid 组件封装过程

    JS 组件系列之 bootstrap treegrid 组件封装过程

    最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid。下面小编通过本文给大家分享JS 组件系列之 bootstrap treegrid 组件的封装过程,需要的朋友可以参考下
    2017-04-04
  • 原生JS实现简单计算器功能

    原生JS实现简单计算器功能

    这篇文章主要为大家详细介绍了原生JS实现简单计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论