scrollHeight和scrollWidth,获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度,可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;

网页尺寸scrollHeight/offsetHeight的更多相关文章

  1. 网页尺寸scrollHeight

    http://www.imooc.com/code/1703 网页尺寸scrollHeight scrollHeight和scrollWidth,获取网页内容高度和宽度. 一.针对IE.Opera: ...

  2. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  3. 网页尺寸offsetHeight,offsetWidth

    网页尺寸offsetHeight offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变). 一.值 offsetHeight = clie ...

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

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

  5. height clientHeight scrollHeight offsetHeight的大致区别

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

  6. clientHeight / scrollHeight / offsetHeight 等属性的区别图

    网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...

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

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

  8. clientHeight scrollHeight offsetHeight

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

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

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

随机推荐

  1. silverlight DataGrid 内嵌ComboBox 实现加载和保存

    <Grid x:Name="LayoutRoot" Background="White" Height="322" Width=&qu ...

  2. golang copy函数

    数组切片内容复制 转自:http://studygolang.com/articles/4560 用于将内容从一个数组切片复制到另一个数组切片.如果加入的两个数组切片不一样大,就会按其中较小的那个数组 ...

  3. HDUoj4857逃生 拓扑排序

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  4. 「LuoguP1496」 火烧赤壁

    Description 曹操平定北方以后,公元208年,率领大军南下,进攻刘表.他的人马还没有到荆州,刘表已经病死.他的儿子刘琮听到曹军声势浩大,吓破了胆,先派人求降了. 孙权任命周瑜为都督,拨给他三 ...

  5. 【POJ 1061】 青蛙的约会

    [题目链接] 点击打开链接 [算法] 列出同余方程,然后用exgcd求解 [代码] #include <algorithm> #include <bitset> #includ ...

  6. 未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyT

    VS2008开发的网站,本地测试没问题,上传到服务器就出错,提示: 引用内容未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, C ...

  7. Spring MVC访问页面直接显示源码

    转自:https://blog.csdn.net/u011781521/article/details/78751253

  8. django上课笔记4-复习数据库操作-复习模板-Seccion-详细cookie和session的区别

    一.复习数据库操作 字段类型 字符串 EmailField(CharField): IPAddressField(Field) URLField(CharField) SlugField(CharFi ...

  9. Ubuntu16.04 : 用友善提供的4.5.1解压后,运行/opt/FriendlyARM/toolschain/4.5.1/bin/arm-linux-gcc -v出错

    通过查阅百度和谷歌,以下解决方法: The problem has been solved, because I installed the amd64.iso linux system,so fir ...

  10. Android6.0 危险权限和普通权限

    Normal Permissions如下 ACCESS_LOCATION_EXTRA_COMMANDS ACCESS_NETWORK_STATE ACCESS_NOTIFICATION_POLICY ...