首页 > web前端 > js教程 > 正文

JavaScript获取页面高度的方法

高洛峰
发布: 2016-11-25 11:56:26
原创
1231人浏览过

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

 

法语写作助手
法语写作助手

法语助手旗下的AI智能写作平台,支持语法、拼写自动纠错,一键改写、润色你的法语作文。

法语写作助手 31
查看详情 法语写作助手
相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号