区分css的height、offsetHeight、clientHeight

最新推荐文章于 2023-08-10 16:16:59 发布
最新推荐文章于 2023-08-10 16:16:59 发布
阅读量377 收藏
点赞数
分类专栏： css基础 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fh2627/article/details/72729629
版权

贴出网上搜到图片，理解一下
这里写图片描述

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

fh2627
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析offsetHeight,clientHeight,scrollHeight之间的区别
09-04
- scrollHeight：等于body的内填充加上内容的高度（不受CSS height属性的影响），但最小值是documentElement.clientHeight。 - 对于documentElement： - clientHeight：等于窗口高度减去滚动条的宽度。 - ...
分析clientHeight、offsetHeight、scrollHeight
03-16
在实际开发中，这些属性常常与CSS样式如`height`、`max-height`、`min-height`以及`overflow`属性一起使用，以实现各种复杂的布局和交互效果。开发者需要根据具体需求选择合适的属性来获取元素的高度信息。 此外，`...
css clientheight、offsetheight、scrollheight详解
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
html中height,offsetheight等差别
newslxw
03-05 507
clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。 of...
CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联
yuyongkun4519的博客
02-24 1100
示例: 对应css为 .div { width:300px; height: 200px; margin: auto; padding:10px; border: 5px solid #000; font-size: 12px; overflow-y: auto; background-color: #FFEB3...
从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别
weixin_53474595的博客
11-14 1562
offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到，如果小伙伴们没有经常使用的话，很容易把这些属性搞混，今天就来理一理这三个属性分别代表什么？offsetHeight = 内容高度 + padding + borderclientheight = 内容高度 + paddingscrollHeight = 内容实际尺寸 + padding。
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
最新发布
趟过java，遇见web
08-10 1521
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
jQuery 中关于CSS操作部分使用说明
10-30
oHeight = e.offsetHeight; oWidth = e.offsetWidth; } else { // Clone and style the cloned element to measure dimensions e = jQuery(e.cloneNode(true)) .find(":radio").removeAttr("checked").end() ...
doctype后如何获得body.clientHeight的方法
10-30
具体来说，原本归属于 `document.body` 的一些属性（如 `clientHeight`, `clientWidth`, `offsetWidth`, `offsetHeight`, `scrollWidth`, `scrollHeight`, `scrollTop`, 和 `scrollLeft`）会被重新分配给 `document....
CSS常用的属性offsetHeight、offsetTop、clientY、offsetY、scrollTOp、scrollHeight、clientWidth
qq_47099087的博客
07-13 1613
结论：1、在content-box下：offsetWidth / offsetHeight = width / height + padding + border2、在border-box下：offsetWidth / offsetHeight = width / height。
height、offsetheight、clientheight、scrollheight区别简单理解
kouryoushine的博客
08-11 439
参考 https://www.cnblogs.com/layaling/p/6223372.html https://www.cnblogs.com/wenruo/p/9754576.html 正文 以一个div盒子模型为例。 height 内容的高度，不包含padding,margin，border等仅仅表示内容显示的高度 offsetheight offsetheight = 内容高+padd...
offsetHeight,clientHeight,height
网站开发初中级代码参考-转载
07-10 145
offsetHeight:包括内容、内边距、边框的高度 clientHeight:包括内容、内边距的高度 看一下下边的css定义后的效果 .game-opt {margin-top: 10px;margin-bottom: 10px;padding-top: 3px;height: 20px;border: solid 1px; } >> $('.game-opt')...
scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
sunny327的专栏
08-23 2008
这几个属性做滚动时会经常用到，现总如下： 首先定义一个div，样式如下： *{ margin:0px; padding:0px;} body{ margin:0px; padding:10px; border:solid 10px #69F;} .aa{ margin:20px auto 0px; width:100px; height:50px; overflow:auto; bor
css中offsetTop, offsetHeight,clientHeight,scrollTop,scrollHeight的区别
ChpeShy的博客
06-11 2786
一、前言 元素大小平时在开发中或多或少都有用到，时常在各种属性中犹豫不决，不知道该用哪个，现在来对偏移量(offsetTop)，客户区大小(clientTop)，滚动大小(scrollTop)和确定元素大小(getBoundingClientRect().top)做个总结。 二、分析 offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。这句话主要的点在于包含元素，包含元素的...
css基础---使用offsetWidth和offsetHeight获取元素的尺寸
wenmin1987的博客
06-08 4870
获取元素的尺寸（display显示情况 和display：none两种情况 来获取） offsetWidth表示元素在页面中所占用的总宽度 offsetHeight表示元素在页面中所占用的总高度 <div style="width:200px;height:50%;"> <div style="width:50%height:50%;;"> ...
JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳
hongtoushan的博客
03-07 843
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight
offset的属性的介绍
coderping的博客
03-06 6477
在获取元素的高宽等属性时,Dom提供了这些API提供给我们下面进行介绍（只能查看，无法修改，修改用 .style.css）：这是我创建的样例，方便查看.box{ position: absolute; left: 100px; top: 100px; width: 800px; ...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
js offsetHeight offsetWidth 解说
mimixiao345的专栏
07-16 423
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 of
前端开发面试题总结：页面布局、css盒模型等基础知识
在前端开发中，还需要掌握其他一些知识点，如 JS 获取 DOM 元素的宽高、左右距离等属性、clientHeight、offsetHeight、scrollHeight 等属性的区别、计算绝对视图的位置等。这些知识点可以帮助开发者更好地实现页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值