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. NEU 1683: H-Index

    题目描述 Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...

  2. SDUT OJ 2054 双向链表的实现 (结构体node指针+遍历 *【模板】)

    双向链表 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 学会了单向链表,我们又多了一种解决问题的能力,单链表利用一个指针就能在内 ...

  3. HDU2181 哈密顿绕行世界问题 —— DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2181 哈密顿绕行世界问题 Time Limit: 3000/1000 MS (Java/Others) ...

  4. 织梦DEDEcms首页调用文档整篇内容

    DedeCMS在首页调用内容页中的整篇文章 织梦程序是一个很强大的程序,也有很多朋友使用织梦程序来做博客,想要像是在博客中一样能在首页中调用一整篇文章,其实在织梦程序中页可以很完美的实现这个功能. 在 ...

  5. oracle:ora-12560 tns 协议适配器错误

    今天新安装了一个oracle server,实例启动了,监听状态也正常. [oracle@db ~]$ lsnrctl status LSNRCTL for Linux: Version 11.2.0 ...

  6. 通过Toad工具查看dmp里面的表

    今天有同事要查看dmp里面的表是否有数据,虽然可以把单表数据通过exp导出查看,但还是稍显有点麻烦,要花时间. 无意中发现toad工具可以直接查看dmp里面的表数据. 第一步:Database--&g ...

  7. [Selenium] Android HTML5 中 Web Storage

    在 HTML5 中,Web Storage 这个新特性可让用户将数据存储在本地的浏览器中.在早期的浏览器中可通过 cookies 来完成这个任务,但 Web Storage 会更加安全和高效,且 We ...

  8. Prime Cryptarithm

    链接 分析:对于三位数我们限定为[100,999],两位数我们限定为[10,99],然后我们依次判断是否满足乘法式且各个数位是否在数列中,若都满足+1 /* PROB:crypt1 ID:wangha ...

  9. Android开发中几种有用的的日历控件实现

    我们大家都知道,在Android平台3.0中才新增了日历视图控件,可以显示网格状的日历内容,那么对于3.0以下的版本要使用日历控件只能借助第三方,目前用的最多的是CalendarView. 先简单介绍 ...

  10. node mkdirSync 创建多级目录

    提供一个实用的一次性同步创建多级目录的方法,收藏一下. function makeDir(dirpath) { if (!fs.existsSync(dirpath)) { var pathtmp; ...