clientHeight、offsetHeight、scrollHeight、clientTop、scrollTop、offsetTop的对比
首先，这些都是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的对比的更多相关文章
- clientHeight & offsetHeight & scrollHeight
clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...
- clientTop scrollTop offsetTop
关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.cli ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- offsetheight 和clientheight、scrollheight、scrollTop区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight
http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...
- clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571 推荐 o ...
- Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop
Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥
scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...
随机推荐
- unittest单元测试框架之测试套件（三）
1.测试套件(注意:测试用例先添加先执行,后添加后执行,由此组织与设定测试用例的执行顺序) addTests:添加多个测试用例 addTest:添加单个测试用例 import unittest fro ...
- Oracle中case的第二种用法
procedure P_GetProVerSingInfo_2018(varFileID in varchar2, p_cr1 out refcontent, p_cr2 out refcontent ...
- UIPanGestureRecognizer 拖动TableView改变其高度
需求:项目中要求tableView的高度随着手拖动的位置而改变如下图: 关键代码如下: - (void)viewDidLoad{ panGestureRecognizer = [[UIPanGestu ...
- java8的新特性，Collections.sort(排序的List集合)的使用，对list封装Map里面的某个值进行排序
--------------------------对简单list的排序---------------------------------- List<Integer> list = ne ...
- The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.报该错误的一种原因。
今天发现某个action返回404. HTTP Status 404 – Not Found Type Status Report Message /xxx.action Description Th ...
- 关于instanceof的使用
测试单独一个类: <?php class A { } $a = new A(); if($a instanceof A){ echo "对象\$a实现了A类"; } 当一个子 ...
- php的基础知识（一）
php(超文本预处理器)定义: php(外文名:php:Hertext Preprocessor,中文名:“超文本预处理器”)是一种通用的开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于 ...
- 第7章 YARN HA配置
目录 7.1 yarn-site.xm文件配置 7.2 测试YARN自动故障转移 ResourceManager (RM)负责跟踪集群中的资源,以及调度应用程序(例如,MapReduce作业).在Ha ...
- select epoll poll
如何理解 Epoll select 和 poll 三种模型,能否用生活中的例子做比喻? 比如说你从某宝下单买了几个东西,这几个东西分别由N个快递员分别给你送过来.在某一时刻,你开始等快递.对于sele ...
- python--模块之random随机数模块
作用是产生随机数 import random random.random:用于生成一个0--1的随机浮点数. print(random.random())>>0.3355102133472 ...