欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > Js&Ajax > JavaScript获取网页各种宽度和高度的代码集

JavaScript获取网页各种宽度和高度的代码集

2018-06-25 454 收藏 0 赞一个 0 真差劲 0 去评论

Js获取网页上的各种宽、高度值,比较全面了,包括网页可见区高度、宽度、正文高宽、屏幕分辨率宽高、网页被卷去的高度和宽度等,针对W3C标准,后面还对各浏览器的兼容性进行补救,会介绍各自浏览器下获取宽高值的不同代码,先来看JavaScript主函数:

<script language="javascript">
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、Opera下都可以使用:

document.body.clientWidth
document.body.clientHeight

不过在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高)

总结的比较全面了,相信这些会有适合你用的。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论