clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

style.height       //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

clientHeight       //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

offsetHeight      //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

scrollHeigh       //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同

scrollTop   //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。

  返回值是一个整数,单位是像素。此属性是可读写的。

offsetTop    //返回元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。

  所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。

clientHeight和offsetHeight的更多相关文章

  1. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  3. innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法

    要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...

  4. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

  5. clientHeight scrollHeight offsetHeight

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

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

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

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

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

  8. scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

    开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...

  9. clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight

    clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...

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

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

随机推荐

  1. linux 下项目的发布

    [wangq10@VM000001865 logs]$ [wangq10@VM000001865 ~]$ ls[wangq10@VM000001865 logs]$ apache-tomcat-7.0 ...

  2. Python写的大小写转换小工具

    几行代码的小工具,用于进行如下转换 TRANSACTIONS ON CLOUD COMPUTING => Transactions On Cloud Computing orig = 'TRAN ...

  3. [Python]正则匹配字符串 | 蒲公英二维码图片url

    代码示例: import re def Find(string): # findall() 查找匹配正则表达式的字符串 url = re.findall('http[s]?://(?:[a-zA-Z] ...

  4. Git(1):思想及概念

    Git与其他版本控制软件的差异及思想 直接记录快照,而非差异比较 Git不保存这些前后变化的差异数据.实际上,Git 更像是把变化的文件作快照后,记录在一个微型的文件系统中.每次提交更新时,它会纵览一 ...

  5. bootstrap4 调整元素之间距离

    影响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同:margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距:padding影响的元素本 ...

  6. androidstudio出包问题--Warning: there were 1 unresolved references to classes or interfaces.

    问题:存在unresolved的类或接口导致打包失败 Warning: there were 1 unresolved references to classes or interfaces. You ...

  7. 【Web】如何注释?

    HTML 形式:<!-- 注释内容 --> 实例: <!-- <p>这是第一段</p> --> CSS 形式:/* 注释内容 */ 实例: /* 选中i ...

  8. kube-metric在kubernetes上的部署

    1.拿包 wgethttps://github.com/kubernetes/kube-state-metrics/archive/v1.7.2.tar.gz 2.tar -zxf  v1.7.2.t ...

  9. 常用小技巧之PyCharm IDE

    Pycharm控制台窗口怎样可以显示不同程序的运行结果 默认情况下,每次运行会把之前的那个结果给清理掉. 有时候运行多个程序像对比结果,不太方便. 可以在pycharm的控制台那里点击右键,在弹出的菜 ...

  10. [bzoj2288]【POJ Challenge】生日礼物_贪心_堆

    [POJ Challenge]生日礼物 题目大意:给定一个长度为$n$的序列,允许选择不超过$m$个连续的部分,求元素之和的最大值. 数据范围:$1\le n, m\le 10^5$. 题解: 显然的 ...