clientHeight scrollHeight offsetHeight
<div style="height:200px;padding:10px;border:1px solid green;"></div>
对于上面的div,它的border的height有多高?答案是200+10*2+1*2=222。
直接上结论:
在style或css样式中的 height:200px 指的是内容可视区的高度,不含内边距,不含border,不含外边距,而不是div的高度。
以下结论在 firefox、chrome、IE10+、QQ浏览器中都测试过,都是一致的:
clientHeight: 可理解为内部可视区高度,样式的height+上下padding(本例即220)。
scrollHeight: 内容的实际高度+上下padding(如果没有限制div的height,即height是自适应的,一般是scrollHeight==clientHeight)
offsetHeight:可理解为div的可视高度,样式的height+上下padding+上下border-width。(本例是222)
height 这个变量在几个浏览器中都是undefined
style.height这个变量在本例中是'200px',不过遗憾的是只有将高度定义在元素的style属性中这个变量才有效,如果是抽取到了样式表中是无法取到的。
clientTop: 容器内部相对于容器本身的top偏移,实际就是 上border-width (本例是1)
scrollTop: Y轴的滚动条没有,或滚到最上时,是0;y轴的滚动条滚到最下时是 scrollHeight-clientHeight(很好理解)
offsetTop: 可以理解为容器相对于document的top的绝对偏移。等于top+margin-top
滚动时通常我们只能scrollTop,当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离,否则就是滚动过头了(手机上的上下拉取)!
clientHeight scrollHeight offsetHeight的更多相关文章
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- clientHeight , scrollHeight , offsetHeight之间的区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- clientHeight—scrollHeight—offsetHeight三者的区别
clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...
- clientHeight / scrollHeight / offsetHeight 等属性的区别图
网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.av ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
随机推荐
- [BZOJ1899][ZJOI2004]Lunch 午餐 (DP)
比较水的DP 但是比较难想 整体思路还是很好理解的 在洛谷的题解里有一个一维的 > 什么时候去看一下 下面发我的代码 #include<bits/stdc++.h> #define ...
- 树莓派mariadb折腾
今天在树莓派之中安装mysql,结果被我安装了mariadb,这样做很讨厌,但是也可以将就用.记录一下折腾的过程. 安装就还是使用sudo apt install mysql 1.安装之后需要使用工具 ...
- rem自适应手机端布局
通过js根据屏幕设备尺寸的大小,改变根元素的值: <script> var html = document.querySelector("html"); var rem ...
- python 计算程序运行耗时的好用的代码
python 计算程序运行耗时的好用的代码: import time start=time.clock() sum=0 for i in range(50): sum=sum+i print(sum) ...
- python之继承与派生
1 继承 继承的概念:继承是一种创建新的类的方式,在python中,新建的类可以继承自一个或者多个父类,原始类称为基类或超类,新建的类称为派生类或子类. python中类的继承分为:单继承和多继承 继 ...
- 6、js初识
今天这篇将介绍javascript,学完javascript就可以使你的网页动起来. 本篇导航: JavaScript概述 JavaScript的基础 JS的数据类型 运算符 流程控制 一.JavaS ...
- 安装Harbor
一.安装Harbor 1. Harbor简介 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Dock ...
- python接口自动化测试(四)-Cookie&Sessinon
掌握了前面几节的的内容,就可以做一些简单的http协议接口的请求发送了,但是这些还不够.HTTP协议是一个无状态的应用层协议,也就是说前后两次请求是没有任何关系的,那如果我们测试的接口之前有相互依赖关 ...
- 每天一个linux命令(11):nl命令
1.命令简介 nl (Number of Lines) 将指定的文件添加行号标注后写到标准输出.如果不指定文件或指定文件为"-" ,程序将从标准输入读取数据. 2.用法 nl [选 ...
- dubbo请求报文实例
dubbo请求报文实例: ============================================= Request [ id=6723668, // 消息ID,Long类型 vers ...