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

程序员的基础教程:菜鸟程序员

js 获取高度的更多相关文章

  1. js获取高度和宽度

      CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...

  2. js获取高度

    转载请注明来源:https://www.cnblogs.com/hookjc/ <script> function getInfo() { var s = ""; s ...

  3. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  4. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  5. JS获取浏览器高度 并赋值给类

    在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...

  6. 原生js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  7. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

  8. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  9. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

随机推荐

  1. 【Python编程:从入门到实践】chapter9 类

    chapter9 类 9.1 创建和使用类 9.1.1 创建Dog类 class Dog(): """一次模拟小狗的简单尝试""" def ...

  2. 解决php7.1的中遇到的问题

    在php7.1中部署微擎遇到问题 1.mysql_xxx函数不支持,修改install.php为mysqli的写法 2.session读取失败,不是php.ini设置的问题,应该是php7.1的bug ...

  3. Windows10 命令行中使用网络驱动器

    Windows10中,我们在局域网内使用共享文件夹,建立映射的网络驱动器,有时候需要一些软件去调用网络驱动器内的资源,但是发现在资源管理器能正常打开,应用软件却无法识别,命令行中提示:“系统找不到指定 ...

  4. JS修改属性,六种数据类型

    JS修改属性 一般修改单个属性是通过JS修改的,比较方便.改多个属性通过css样式改更方便. 1.特殊:通过JS修改包含"-"符号的属性,例如margin-top // 特殊 修改 ...

  5. Django高级admin续

    ModelAdmin对象 ModelAdmin类是模型在Admin界面中的表示形式 定义:定义一个类,继承于admin.ModelAdmin,注册模型时使用这个类 class HeroAdmin(ad ...

  6. jqgird

    将jqgird某字段设为超链接,并传递相关参数 cellvalue:为后台传递过来的字段数据 rowObject:为本行数据 实现: formatter:function(cellvalue, opt ...

  7. 使MySQL查询区分大小写的实现方法

    发布:mdxy-dxy 字体:[增加 减小] 类型:转载 我们在MySQL中使用SELECT语句查询时,可不可以使查询区分大小写?今天从网络上找到了方法,现总结如下.   1.一种方法是可以设置表或行 ...

  8. JAVA 整合 SSM (Spring + SpringMVC + MyBatis)

    < 一 > POM 配置文件 ( 如果出现 JAR 包 引入错误, 请自行下载 ) <project xmlns="http://maven.apache.org/POM/ ...

  9. MySQL命令行学习

    1.登录mysql 本地:mysql -u root -p, 回车后输入密码; 也可以p后不加空格,直接加密码.回车就登录了 远程:mysql -hxx.xx.xx.xx -u -pxxx 2.查看数 ...

  10. AES 加密256位 错误 java.security.InvalidKeyException: Illegal key size or default parameters

    Java发布的运行环境包中的加解密有一定的限制.比如默认不允许256位密钥的AES加解密,解决方法就是修改策略文件. 官方网站提供了JCE无限制权限策略文件的下载: JDK8的下载地址: http:/ ...