LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript获取页面宽高度的方法

admin
2024年4月15日 14:16 本文热度 43

<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


该文章在 2024/4/15 15:29:30 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved