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. Mybatis 联合查询XML与注解对比

    由于是练习,故只做了感兴趣的一部分测试. 测试类容XML配置转注解方式 实体类为了测试请忽略设计是否合理… User.java @Alias("User")public class ...

  2. View的介绍和运用 && FlexBox布局

    开始我们今天的项目学习啦~~~~~~ 1> 第一步当然是创建项目啦: 进入终端: 创建ViewDemo项目 命令如下啦,你看懂了对吧...嘻嘻!!! 2>View的介绍和运用 项目安装创建 ...

  3. three.js效果之热力图和轨迹线

    1.热力图 开始的时候,是用一个网上找的canvas画渐变热点的demo,原理就是给定顶点坐标,然后画圆,颜色使用渐变色,根据权重决定渐变的层数(红色->橙色->绿色) . 但是终究觉得这 ...

  4. JavaScript(5)—— 变量及数据类型

    JavaScript和Java在概念和设计方面都是完全不同的语言.JavaScript由Brendan Eich于1995年发明,并于1997年成为ECMA标准.ECMA-262是官方名称.ECMAS ...

  5. document.documentElement.clientHeight 和 document.body.clientHeight

    document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.do ...

  6. Shell中test比较

    数字比较 比较 描述 -eq 检查是否相等 -ge 检查是否大于或等于 -gt 检查是否大于 -le 检查是否小于或者等于 -lt 检查是否小于 -ne 检查是否不等于 字符串比较 = 检查字符串1和 ...

  7. linux下安装mysql5.7方法与常见问题

    linux上安装mysql5.7 1.下载tar包,这里使用wget从官网下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7 ...

  8. python -- TypeError: 'module' object is not callable

    文件: 代码: import pprintmessge = 'It was a bringht cold day in April,and the clocks were striking thrir ...

  9. PAT A1031 Hello World for U (20)

    思路: 读取数组 int i = 0; while(cin >> word) { c[i] = word; i++; } 计算边长 int n1 = (length + 2) / 3; i ...

  10. linux下selenium+phantomjs环境

    # 安装依赖软件yum -y install wget fontconfig # 下载PhantomJSwget -P /tmp/ https://bitbucket.org/ariya/phanto ...