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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
Vue+ElementUI table实现表格分页
Dec 14 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
我的论坛源代码(九)
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
jQuery实现开关灯效果
2020/08/02 jQuery
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python实现简单字典树的方法
2016/04/29 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python日志模块logbook使用方法
2019/09/19 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python中私有属性的定义方式
2020/03/05 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python内置函数及功能简介汇总
2020/10/13 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
python实现控制台输出颜色
2021/03/02 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
春风行动实施方案
2014/03/28 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书