博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript获取页面宽高度的方法
阅读量:5912 次
发布时间:2019-06-19

本文共 2836 字,大约阅读时间需要 9 分钟。

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

 

 

 

网页可见区域宽:

document.body.clientWidth

 

网页可见区域高:

document.body.clientHeight

 

网页可见区域宽:

document.body.offsetWidth(包 括边线的宽)

 

网页可见区域高:

document.body.offsetHeight(包括边线的宽)

 

网页 正文全文宽:

document.body.scrollWidth

 

网页正文全文高:

document.body.scrollHeight

 

网 页被卷去的高:

document.body.scrollTop

 

网页被卷去的左:

document.body.scrollLeft

 

网 页正文部分上:

window.screenTop

 

网页正文部分左:

window.screenLeft

 

屏 幕分辨率的高:

window.screen.height

 

屏幕分辨率的宽:

window.screen.width

 

屏 幕可用工作区高度:

window.screen.availHeight

 

屏幕可用工作区宽度:

window.screen.availWidth

转载于:https://www.cnblogs.com/yybk/archive/2012/03/25/2416655.html

你可能感兴趣的文章
Django的模板系统
查看>>
【总结整理】关于二手交易平台的讨论
查看>>
移动APP安全测试
查看>>
流程(上)
查看>>
基于django的生成二维码的接口
查看>>
常识性概念
查看>>
java 集合框架(四)Set
查看>>
微信公众号支付 当前url未注册
查看>>
String类的常用方法详解
查看>>
通过Adobe Encode CC 2017,将一张静态图生成一个长时间的视频。
查看>>
git stash -- common usage
查看>>
如何使用ABBYY FineReader 12将JPEG文件转换成可编辑文本
查看>>
JavaScript倒计时类
查看>>
第八周作业
查看>>
将Sublime Text 2搭建成一个好用的IDE(转)
查看>>
Intersection of Two Linked Lists(链表)
查看>>
iOS 真机测试流程
查看>>
MSSQL扫盲系列(开篇)
查看>>
Linux运维学习笔记-定时任务知识总结
查看>>
Bootstrap学习笔记系列5------Bootstrap图片显示
查看>>