元素的scrollHeigth、offsetHeight、clientHeight

最新推荐文章于 2024-10-28 11:39:52 发布
最新推荐文章于 2024-10-28 11:39:52 发布
阅读量215 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JavaScript基础入门 文章标签： 元素大小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cotexarm7/article/details/78644386
本文详细解释了DOM元素中三个高度属性：offsetHeight、clientHeight和scrollHeight的区别及计算方式，并给出了offsetWidth、clientWidth和scrollWidth的相应概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

每个dom元素都有3个表示其高度的属性，分别为scrollHeight、offsetHeight和clientHeight。那么，它们3个有什么区别呢？

1.offsetHeight：内容区高度＋内边距高度＋边框高度

2.clientHeight：内容区高度＋内边距高度

因此，一个元素的offsetHeight － clientHeight ＝ 2倍的边框厚度

3.scrollHeight：滚动元素的高度

同理：offsetWidth、clientWidth、scrollWidth的计算方式同offsetHeight、clientHeight和scrollHeight

1 offsetTop：元素的上外边框距离其包含元素的上内边框的距离

2.scrollTop：元素的上方被隐藏的像素数


总结JS笔记
m0_65992672的博客
11-08 770
总结JS笔记
element-ui之el-scrollbar源码解析学习
weixin_34025051的博客
12-06 2760
2019独角兽企业重金招聘Python工程师标准>>> ...
clientHeight、scrollHeight、offsetHeight都是些啥？
Ray_Huang
08-31 266
前段时间写一个自动滚动+鼠标放上去可供滚动的页面功能，被元素的几个属性搞的有点晕乎晕乎的，下决心来搞明白是什么意思，先上示例代码： <style> .father{ width: 500px; height: 400px; border: 50px solid blue; border-color: red; background: blue; over...
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
进击的葱
12-23 389
  转自——http://www.cnblogs.com/nanshanlaoyao/p/5964730.html clientHeight , scrollHeight , offsetHeight相信每个人都用过，可是每次用都要查一下到底哪个是文档大小哪个是视口大小，还有头疼的兼容问题。 先来官方的了解一下这三个属性： clientHeight：元素客户区的大小，指的是元素内容及其边框...
JS中height、clientHeight、scrollHeight、offsetHeight区别
热门推荐
01-06 2万+
我们来实现test中的onclick事件    function justAtest()     {         var test= document.getElementById("test");         var test2=document.getElementById("test2")         var test3=document.getElementB
js里使用的各种元素大小尺寸属性总结
wfbob的专栏
01-11 1812
div元素： getComputedStyle(element, null).width，getComputedStyle(element, null).height：元素内容区域尺寸，不包含外边距，边框以及内边距(IE8及以下使用element.currentStyle代替getComputedStyle())； clientWidth，clientHeight：元素可视区域尺寸，内边距以内
【带图】讲解offsetHeight、offsetLeft、clientWidth、scrollHeigth、scrollTop等几个属性的区别
Gyoung杨广
03-29 2566
1.偏移量元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框的大小（注意，不包括外边距）。offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框的高度。offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素...
clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop
最新发布
m0_72674495的博客
10-28 466
和scrollTopoffsetTop这个属性返回的是当前元素的外边框到其定位父元素（）的顶部内边距边缘的距离（包含它的外边距margin）。offsetParent元素指该元素的定位元素以及最近的table,td,th,body. 可见，offsetParent和position属性的包含块概念类似.大部分场景下可以通用.
js基础——DOM元素对象
jwz934738949的博客
09-07 135
1、clientHeight：在页面上返回内容的可视高度（不包括边框，内边距或滚动条）； 2、clientWidth：在页面上返回内容的可视宽度（不包括边框，内边距或滚动条）； 3、offsetHeight：返回任何一个元素的高度包括边框和填充，但不包括内边距； 4、offsetWidth：返回元素的宽度，包括边框和填充，但不包括内边距； 5、offsetLeft：返回当前元素的相对水平偏...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
weixin_28788593的博客
06-24 552
浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight发布时间：2020-07-17 09:27:20来源：亿速云阅读：223作者：小猪小编这次要给大家分享的是浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这...
DOM获取元素的尺寸类专用属性
weixin_46381471的博客
06-29 157
获取元素的尺寸类专用属性 offsetWidth，offsetHeight：元素包含边框以内的尺寸，包含滚动条自身尺寸，即border + padding + width(height) clientWidth padding+width 元素可视区域尺寸，内边距以内的减去滚动条自身尺寸后的尺寸。 padding + width(height) - 滚动条自身尺寸 scrollWidth，scrollHeigth：元素内边距以内的尺寸，>= clientWidth(clientHeight
input事件--keydown、keypress、keyup、input、change事件
cotexarm7的专栏
03-23 2992
键盘事件 keydown：当任意键按下时，（键盘上的F键不触发） keypress：当字符键按下时（上下左右箭头键不触发,shift ctrl option command都不触发） keyup：当键弹起时 change：当input中的内容发生变化，并且失去焦点时触发。 所有的dom都可以监听键盘事件。 如果我们遇到需要根据文本框的内容的变化做处理的业务，比如：实时展示文本框内字符个...
url编码函数encodeURI和encodeURIComponent方法
cotexarm7的专栏
10-19 2333
一、作用全局函数encodeURI和encodeURIComponent方法，都可以用来进行url编码。之所以要对url进行编码，是因为浏览器不能识别某些字符，例如：空格、中文等。这两个方法对这些特殊字符用特殊的UTF-8进行编码，从而使得浏览器可以识别。二、区别首先要讲解一下，专属url的特殊字符，这些字符指的是除数字字母以外的字符，例如: // /  &amp;  # 。如果某个url作为参数...
js实现事件发射监听（观察－订阅模式）
cotexarm7的专栏
04-27 1961
var eventEmitter = { emit: function (eventName) { var callbackArr = events[eventName] if ( callbackArr &amp;&amp; callbackArr.length) { for (var i = 0; i &lt; callbackArr.len...
hover到一个icon，content出现，再次hover到content上，content不消失
cotexarm7的专栏
01-22 1586
html css .icon { width: 30px; height: 30px; border: 1px solid red; } .content { width: 400px; height: 400px; border: 1px solid red; margin-top: 5px; display:
【swiper+audio】swiper轮播的同时，播放相应的音频
cotexarm7的专栏
12-04 1350
1.代码，每次轮播会播放对应音频 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; &lt;link rel=&q
鼠标移入和移出事件mouseenter VS mouseover 、mouseleave VS mouseout
cotexarm7的专栏
11-09 1340
我们在做业务的过程中，经常会遇到当鼠标hover某个元素时，就将隐藏的元素显示，当鼠标没有hover时，就隐藏对应的元素。 如果要显示的元素是hover元素的子元素，那么用css就可以解决，但是，如果遇到其他的情况，就需要监听hover元素的mouseenter、mouseover或者mouseleave、mouseout事件，那么它们到底有什么区别的？下面我们来一一展述。 一、相同点： m
scrollTop、offsetTop、页面视口高度的使用情景
cotexarm7的专栏
10-20 1077
我们在做项目过程中，经常会遇到一个需求就是，观察滚动元素中的某个子元素是否在展示窗口内，或者更具体一点，处在展示窗口的何处。这个时候，我们会用到滚动元素的scrollTop、offsetTop等属性。现在介绍这些属性的用法： 一、滚动元素在其所在的展示窗口中被卷去的高度(滚动条的垂直位置)－scrollTop 展示窗口可以是一个普通的DOM元素，也可以是浏览器窗口。这个窗口必须是有固定高度
怎么获取特定元素的clientheight和offsetheight
04-11
可以使用JavaScript中的方法来获取特定元素的clientheight和offsetheight。例如，可以使用以下代码获取一个id为"elementId"的元素的clientheight和offsetheight： var element = document.getElementById(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值