博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 获取高度
阅读量:7007 次
发布时间:2019-06-28

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

网页可见区域宽 :document.body.clientWidth;  

网页可见区域高:document.body.clientHeight;   

网页可见区域高: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;  

 

(scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。)

 

这是一个很复杂的问题,让我们想像一下:

 

  • document.documentElement.scrollWidth
  • document.documentElement.offsetWidth
  • document.documentElement.clientWidth
  • document.body.scrollWidth
  • document.body.offsetWidth
  • document.body.clientWidth

 

有 6 个属性要测,这 6 个属性要放在 4 种情况中:

 

  • 没有指定 DOCTYPE,网页内容没有超过窗口宽度;
  • 没有指定 DOCTYPE,网页内容超过窗口宽度;
  • 指定 DOCTYPE,网页内容没有超过窗口宽度;
  • 指定 DOCTYPE,网页内容超过窗口宽度;

 

然后这 4 种情况要放到几个主流浏览器中,假设只有 3 种浏览器:

 

  • IE
  • Firefox
  • Chrome

 

算一下,6 * 4 * 3,有 72 种情况要测试,天啊。并且不要指望 Firefox 和 Chrome 结果是一样的,不要指望 Firefox 不会出现让您费解的结果,所以这真是一件恼火的事。

 

从应用入手简化分析

 

72 种测试情况确实很恼火,但我们回过头来一想,我们到底想要什么?

 

我认为我们想要两个东西:

 

  • 一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
  • 二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。

 

测试结果

 

结果很复杂,就不说了,这里只说实际中怎么使用:

 

  • 要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
  • 要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。

 

表达式为:

 

  • var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  • var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

程序员的基础教程:

转载地址:http://rujtl.baihongyu.com/

你可能感兴趣的文章
java.lang.NoSuchMethodError: javax.xml.ws.WebFault.messageName()Ljava/lang/Strin
查看>>
Hystrix之ThreadLocal上下文传播
查看>>
卫星地图
查看>>
【撸码师备忘】事务的4种隔离级别与7种传播行为
查看>>
子类继承父类重写静态方法不能变成普通方法
查看>>
拒绝访问temp目录解决方法
查看>>
Confluence 6 审查日志的对象
查看>>
[程序员灯下黑]---没学会快乐
查看>>
android 地图 infoWindow的每个控件添加点击事件
查看>>
Nginx+uwsgi+Django (Python web环境)
查看>>
死记英文单词
查看>>
Python 入门知识捡漏
查看>>
C#自己实现的Dictionary类
查看>>
【python队列】生产者消费者模型
查看>>
数据挖掘十大经典算法
查看>>
loadTexture和loadTextureNormal
查看>>
linux版本选择 --转
查看>>
QT creator 建立helloworld
查看>>
解决在VMware中安装64位系统时“此主机具有虚拟化支持能力的,但虚拟化技术被禁用”的方法...
查看>>
AndroidManfest
查看>>