javascript获取网页宽高方法汇总


Posted in Javascript onJuly 19, 2015

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高)

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

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
jQuery操作css样式
May 15 jQuery
详解webpack性能优化——DLL
Oct 20 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
jQuery获取URL请求参数的方法
Jul 18 #Javascript
jQuery增加自定义函数的方法
Jul 18 #Javascript
jQuery插件简单实现方法
Jul 18 #Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 #Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 #Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 #Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 #Javascript
You might like
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
零基础小白多久能学会python
2020/06/22 Python
NET程序员上机面试题
2015/05/23 面试题
AJAX的全称是什么
2012/11/06 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
滴水洞导游词
2015/02/10 职场文书
支行行长岗位职责
2015/02/15 职场文书
公司停电通知
2015/04/15 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
python实现Nao机器人的单目测距
2021/09/04 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android