常用各height的区别

1、offsetHeight

元素实际占用高度

offsetHeight = border+padding+height

2、clientHeight

clientHeight = padding+ height - 水平滚动条高度 (如果存在)来计算

3、scrollHeight

包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

4、innerHeight

浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

5、outerHeight

获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

6、scrollTop

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

7、offsetTop

它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

8、getBoundingClientRect方法

返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。

值是相对于视口的，而不是绝对的。

常用各height的区别相关推荐

$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
前端PS切片常用不同格式图片区别
最近博主在学习切片工具的使用,经过浏览几个教学视频和其他大神的切图经验后,也是小有收获,现来总结以便复习. 为什么要学习切片因为博主准备从事前端方向(虽然现在还是一个大菜鸟),而现在前端会使用切片工 ...
html常用标签有什么区别,HTML常用标签
1.HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后面 ...
JAVA集合Connection接口和Map接口常用的类及区别
JAVA集合详解文章目录 JAVA集合详解前言一.集合是什么? 1. 集合类 2.集合和数组的区别: 二.使用步骤一.Connection接口(单列集合) 1.List和Set的优缺点 2.总 ...
MYSQL骚操作之第四十话之索引优化+SQL常用高频语句+删除区别
文章目录前言一.索引优化 1.Btree索引 1.1.概述 1.2.存储结构 1.3.MHISAM引擎索引结构 2.HASH索引 2.1.概述及存储结构 2.2.HASH索引的弊端 3.FULLT ...
Python 类常用各种方法及区别
Python中至少有三种比较常见的方法类型,即实例方法,类方法.静态方法.它们是如何定义的呢?如何调用的呢?它们又有何区别和作用呢?且看下文. 首先,这三种方法都定义在类中.下面我先简单说一下怎么定义 ...
linux常用关机命令及其区别-Shutdown halt reboot init
1.shutdown shutdown命令安全地将系统关机. shutdown 参数说明: [-t] 在改变到其它runlevel之前﹐告诉init多久以后关机. [-r] 重启计算器. [ ...
mysql数据库常用存储引擎的区别
InnoDB:支持事务处理,支持外键,支持崩溃修复能力和并发控制.如果需要对事务的完整性要求比较高(比如银行),要求实现并发控制(比如售票),那选择InnoDB有很大的优势.如果需要频繁的更新.删除操 ...
CAD软件与常用EDA软件的区别
CAD工具: 计算机辅助设计工具,主要作用:绘图工具,使用者:遍布各个行业 EDA工具: 在CAD绘图技术基础上融合了应用电子技术.计算机技术.信息处理技术等实现电子产品的自动设计. 使用者:特指有关 ...

常用各height的区别

常用各height的区别相关推荐

最新文章

热门文章