网页(内容)可见区域宽:document.body.clientWidth

网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

clientHeight / scrollHeight / offsetHeight 等属性的区别图的更多相关文章

  1. clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

    clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...

  2. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  3. height clientHeight scrollHeight offsetHeight的大致区别

    这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...

  4. clientHeight scrollHeight offsetHeight

    <div  style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...

  5. clientHeight—scrollHeight—offsetHeight三者的区别

    clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...

  6. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...

  7. clientHeight , scrollHeight , offsetHeight之间的区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  8. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  9. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

随机推荐

  1. wireshark 分析 TCP 请求(转)

    转自:http://supben.iteye.com/blog/2329780 先看一段代码  程序片段是一个RPC调用 ,根据简历id获取简历实体.本地IP 10.252.156.132, 远程ip ...

  2. CSIC_716_20191129【面向对象高级----反射、类的内置方法(魔法方法)、单例模式】

    反射 反射是通过'字符串'对 对象的属性进行操作,反射有四个内置的方法. hasattr 通过字符串 判断对象的属性或者方法是否存在 getattr 通过字符串  获取对象的属性或者方法        ...

  3. leetcood学习笔记-171-excel表列序号

    题目描述: 方法: class Solution: def titleToNumber(self, s: str) -> int: num = 0 r = 1 for i in s[::-1]: ...

  4. delphi xe10 获取屏幕截图

    //截取屏幕图片 function MakeScaleScreenshot(Sender: TControl): TBitmap; function GetScreenScale: Single; v ...

  5. NX二次开发-NX+VS写代码设断点调试技巧

    在做NX二次开发的时候写完代码,编译可以通过,但是执行的时候却没有反应,或者得到的结果不对,说明肯定有地方传值出错了.我在查找代码错误的时候有几种方法:1.uc1601打印函数输入和输出的值看对不对. ...

  6. (转)The connection to adb is down, and a severe error has occured. .

    转:http://blog.csdn.net/yu413854285/article/details/7559333 启动android模拟器时.有时会报The connection to adb i ...

  7. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  8. Spring-Security (学习记录五)--配置登录时,密码采用md5加密,以及获取登录信息属性监听同步自己想要的登录信息

    目录 1. PasswordEncoder 采用密码加密 2. 获取当前的用户信息 1. PasswordEncoder 采用密码加密 使用前面的例子.可以看出我们数据库密码是采用明文的,我们在登录的 ...

  9. LeetCode 197. Rising Temperature (上升的温度)

    题目标签: 题目给了我们一个 温度表格,让我们找到 所有温度比之前一天高的,返回id. 建立 Weather w1, Weather w2,找到当w1 的温度 大于 w2 的时候,而且 w1 的日期是 ...

  10. CodeForces 1152F2 Neko Rules the Catniverse (Large Version)

    题目链接:http://codeforces.com/problemset/problem/1152/F2 题目大意 见http://codeforces.com/problemset/problem ...