三张图看懂 clientheight、offsetheight、scrollheight

clientheight

  clientheigh: 内容的可视区域,不包含border。

  clientheight=padding + height - 横向滚动轴高度。

The Element.clientHeight read-only property is zero for elements with 
no CSS or inline layout boxes, otherwise it’s the inner height of an 
element in pixels, including padding but not the horizontal scrollbar 
height, border, or margin. 

offsetheight

  offsetheight:它包含padding、border、横向滚动轴高度。

  offsetheight=padding+height+border+横向滚动轴高度

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer. 
Typically, an element’s offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar (if present, if rendered). 
For the document body object, the measurement includes total linear content height instead of the element’s CSS height. Floated elements extending below other linear content are ignored. 

scrollheight

  scrollheight:可滚动高度,就是将滚动框拉直,不再滚动的高度,这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow. 
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element’s padding, but not its border or margin. 

原文地址:https://www.cnblogs.com/ZengYunChun/p/9323006.html

时间: 2024-11-02 11:26:12

三张图看懂 clientheight、offsetheight、scrollheight的相关文章

一张图看懂css的position里的relative和absolute的区别

position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).nherit:从父元素继承 position 属性的值.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位.(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置). 比较常用而且会引起初学者迷惑的是absolute和r

一张图看懂Function和Object的关系及简述instanceof运算符

我在写一篇图解prototype和__proto__的区别时,搜资料搜到了一个有意思的现象,下面这两个运算返回的结果是一样的: Function instanceof Object;//true Object instanceof Function;//true 这个是怎么一回事呢?要从运算符instanceof说起. 一.instanceof究竟是运算什么的? 我曾经简单理解instanceof只是检测一个对象是否是另个对象new出来的实例(例如var a = new Object(),a i

一张图看懂ANSYS17.0 流体 新功能与改进

一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 微信号sim_ol 功能介绍这是数值模拟.仿真分析领域最大的公众号,没有之一!!! 点上方“模拟在线”查看更多“牛B”资讯! 感谢ANSYS公司对平台的友情支持,本次17.0的改进报告均为ANSYS提供(授权直接摘抄,确实给小编省事不少啊).本次首先带来是流体方面的改进和优化.后续陆续推送结构.电磁等各方

一张图看懂原码、反码、补码、移码

前言 原码.反码.补码其实两年前就讲过,只是当时的理解太过肤浅或者直接说就是没有理解,因为对于数学比较发怵的我看到那么多的公式很是脑袋大,所以想要硬记也记不住.这次讲课的时候好歹知道了运算规则,但别人一问为什么,立马那个冏啊~好了,废话不多说了,开始进入正题(如果我的理解有偏差,恳请各位大虾不吝指出): 一张图胜过千言万语,下面的这张是本篇想要说的大概内容 原码 我们知道,计算机是以0和1进行运算的,而且内部只有加法运算器,但日常生活中使用的却是十进制,并且有正负之分.于是我们发明了原码:最高位

4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程)

4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程) (2016-02-01 03:21:06) 转载▼ 标签: delphi ios delphi10 教程 编程 分类: 编程学习 参见: delphi XE4生成ipa并部署到越狱iPad视频教程 os x el capitan / Xcode_7.2 / delphi 10 切换不同版本的模拟器.png在虚拟器上调试的正确设置.png域名设置.png记得选择的平台要选虚拟器.png

31张图看懂初高中所有英语语法

31张图看懂初高中所有英语语法

【转帖】自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势

自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势 大数据时代,商业智能和数据分析软件市场正在经历一场巨变,那些强调易用性的,人人都能使用的分析软件正在取代传统复杂的商业智能和分析软件成为市场的热点和趋势. 只要看一眼Tableau的财务报告,你就能明白商业智能市场正在发生什么,Tableau去年第四季度营收同比增长了75%.这标志着企业和个人纷纷开始购买那些“自助式”分析软件,也就是那种简单易用到完全不懂数据分析的业务人员和商务人士也能轻松上手的分析软件,例如Tableau,而传统商业分

【python系统学习07】一张图看懂字典并学会操作

点击跳转 - 原文地址 数据类型 - 字典(dict) 目录: [python系统学习07]一张图看懂字典并学会操作 原文地址:https://www.cnblogs.com/padding1015/p/12232571.html

Nodejs学习笔记(三)——一张图看懂Nodejs建站

前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试Nodejs>之后,代码编写环境就从Sublime转战到Eclipse下,感觉顺手多了.于是就跟着Scott老师学起了Nodejs建站的课程(推荐大家点进去看看),踏上了未爬先走的路子. 作为一个白里透白的小白来说,今天主要记录下如何用Nodejs搭建一个小小的网站,以及自己对于这种Nodejs建站的运