首先，这些都是dom节点的属性。

高宽属性：
clientHeight：html元素不含border的高度。
　　对于box-sizing不同的情况，有些地方需要注意一下。
当box-sizing为content-box的时候，clientHeight实际上相当于height+padding。当box-sizing 为border-box的时候，clientHeight实际上为height-border

offsetHeight：html元素里包含border的高度。

scrollHeight：内元素的margin+border+padding+内容。

定位属性：
clientTop：border的宽度。

scrollTop：滚动了的高度。如下图（外元素上下滚动）

offsetTop：到上一个有定位的元素的距离。上一个是指上层节点，有定位指的是有position属性.

clientHeight、offsetHeight、scrollHeight、clientTop、scrollTop、offsetTop的对比的更多相关文章

  1. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

  2. clientTop scrollTop offsetTop

    关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.cli ...

  3. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  4. offsetheight 和clientheight、scrollheight、scrollTop区别

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

  5. 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight

    http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...

  6. clientHeight,offsetHeight,scrollHeight迷一样的三个值

    https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571  推荐 o ...

  7. Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

    Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...

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

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

  9. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  10. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

随机推荐

  1. 一站式学习Redis 从入门到高可用分布式实践

    1:redis 是用c语言来实现的,速度快 持久化 单线程 复杂的数据类型有bitmap和hyperloglog和geo地理信息2:高可用.分布式 v2.8开始支持Redis-Sentinel(哨兵) ...

  2. React最佳实践（1）

    React最佳实践不敢妄谈,但最差实践非知乎莫属. 旧版知乎看起来土了点,但体验流畅,起码用起来舒服. 新版知乎看起来UI现代化,技术实现上采用了React,但是可能因为知乎缺钱,请不起高水平的前端工 ...

  3. ubuntu18.04安装搜狗输入法

    首先,安装Fcitx输入框架 sudo apt install fcitx 其次,上搜狗输入法官网下载Linux版本搜狗输入法(32位和64位根据自己情况,在虚拟机上用浏览器下载即可 然后进入相应的下 ...

  4. 从tomcat下载文件的配置方法(很全呢)

    前几天我做的项目有个下载文件的东西让我苦恼了一下,上传的文件没有放到OSS服务器,而是直接放到tomcat内, 我就想做一个a标签直接下载的得了,结果点开一直都说没有该文件,我查了很多资料找到了如何配 ...

  5. 路由(二) router-link的使用

    main.js import Vue from 'vue'import App from './App'import VueRouter from 'vue-router'import footer ...

  6. canvas 将html绘制图片 生成图片链接

    废话不多说,直接上代码 其中图片地址换成你的,自己玩儿去吧 <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 一、Vue项目构建

    Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- ...

  8. day 12 生成器和生成器函数以及各种推导式

    一.生成器    本质就是迭代器. 我们可以直接执⾏__next__()来执⾏ 以下⽣成器 一个一个的创建对象 创建生成器的方式: 1.生成器函数 2.通过生成器 表达式来获取生成器 3.类型转换(看 ...

  9. 集合之HashMap、Hashtable

    HashMap 基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 Hashtabl ...

  10. mysql 库和表占用空间查询

    1. 查看该数据库实例下所有库大小,得到的结果是以MB为单位 as sum from information_schema.tables; 2.查看该实例下各个库大小 as total_mb, as ...