关于DOM元素宽、高属性的辨析

最新推荐文章于 2024-01-25 20:54:08 发布
最新推荐文章于 2024-01-25 20:54:08 发布
阅读量652 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML5 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sofeien/article/details/54946898
本文详细介绍了DOM元素的各种尺寸属性，包括clientHeight/clientWidth、scrollHeight/scrollWidth以及offsetHeight/offsetWidth的区别与联系。这些属性分别代表了元素的可见内容区域、实际内容大小以及包含边界的总尺寸。

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

DOM元素的宽高有多项属性值：

.clientHeight .clientWidth   

代表元素内部内容的可见宽高，不包括内边距，滚动条的宽高

.scrollHeight .scrollWidth

代表元素内部内容的实际宽高。可滚动最大距离与实际宽高和可见宽高的差值有关

.offsetHeight .offsetWidth

代表元素外侧包裹边框的宽高，包含滚动条的宽高


SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
DOM中的宽高
weixin_30851867的博客
07-08 119
jQuery中： .height()-----------代表元素本身的高度 .innerHeight()-----------代表元素的高度(包括内容高度height+内边距padding) .outerHeight()-----------代表元素的高度(包括内容高度height+内边距padding+边框border) .outerHeight(true)----------...
详解各种获取元素宽高及位置的属性
weixin_30887919的博客
04-15 245
offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(wi...
DOM中获取宽高、位置总结
banketan1026的博客
12-30 263
原生JS 一、文档、窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen.availHeight | window.screen.availWidth // 浏览器窗口可见区域宽高 window.innerHeight ≈ documen...
关于元素宽高、边距属性及应用
躺赢啊
12-13 258
一、属性定义 1、width: auto 默认值。浏览器可计算出实际的宽度。 length 使用 px、cm 等单位定义宽度。 % 定义基于包含块（父元素）宽度的百分比宽度。 inherit 规定应该从父元素继承 width 属性的值。 2、padding length： 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px % ： 规定基于父元素的宽度的百分比的填充 inherit...
JavaScript DOM 学习笔记
02-21 1121
DOM学习笔记
2025年WEB前端JS高级题库.doc
最新发布
05-02
而在JavaScript中获取元素垂直方向占用的空间大小，应使用`offsetTop`属性，表示元素顶部距离其最近定位父元素的偏移量。此外，`scrollTop`属性用于获取或设置元素的垂直滚动条位置。 这份题库不仅包含了前端开发的...
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
qq_55154022的博客
11-20 505
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
编写高质量代码改善JavaScript程序的188个建议(1-78).docx
05-10
在编写高质量的JavaScript程序时，遵循一定的编程原则和最佳实践至关重要。这188个建议旨在帮助开发者提高代码质量和性能，以下是对前78个建议的详细解释。 建议1：警惕Unicode乱码 JavaScript是基于Unicode标准的...
获取浏览器及Dom宽高
thingir的博客
08-14 324
参考文章： https://blog.youkuaiyun.com/qq_36947128/article/details/80324538 http://www.cnblogs.com/jin-zhe/p/10506238.html https://www.cnblogs.com/jyybeam/p/6183663.html 以元素的高度为例(宽度同理)，一般会用到下边四种获取高度： height、offsetHeight、clientHeight、innerHeight <style>
笔记：dom元素各种宽度和高度，getBoundingClientRect，clientWidth,clientHeight,offsetWidth,offsetHeight
YanHSama的博客
04-25 3268
dom.clientwidth
JavaScript之元素宽高及事件对象距离属性的介绍
weixin_44827643的博客
06-28 551
本文主要介绍元素的不同宽高及距离属性，包括clientWidth、offsetWidth等一些容易混淆的属性。（1）元素属性1.offsetWidth和offsetHeight获取元素的宽高，包含边框2.clientWidth和clientHeight获取元素的宽高，不包含边框3.clientTop和clientLeft分别获取元素上边框和左边框的宽度4.offsetTop和offsetLeft分别获取元素距离整个页面（包含未显示的区域）顶部和左侧的距离（2）事件对象属性1.offsetX和offsetY表
DOM元素大小
weixin_30578677的博客
05-21 129
一、偏移量 偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过下列4个属性可以取得元素的偏移量。 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以...
DOM元素的各种宽度和高度
行成于思毁于随
01-29 2436
DOM元素的各种高度和宽度可以用js直接获取，也可以用JQuery获取，但它们的函数很多，容易搞混 博主在做一个滚动加载更多列表的时候，也曾因为获取高度的方法使用不当，造成部分手机不兼容，根据自己在网上查的资料和经验，这里进行详细说明： Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.
dom中的元素尺寸属性
赵佳敏的博客
12-03 1067
目录一、尺寸属性1. offsetHeight、offsetWidth---网页可见区域宽高（含边框）2. clientHeight、clientWidth---网页可见区域宽高（不含边框）3. style.width、style.height----内容区域的宽高4. scrollWidth、scrollHeight----网页正文全文宽高（包括不可见部分）二、元素偏移1. offestTop---------上偏移2. offsetLeft---------左偏移三、两个滑动距1. scrollTop.
理解DOM元素中的各类宽高
XFCY514728的博客
05-14 437
页面宽高(整个页面)document.documentElement.scrollWidth document.documentElement.scrollHeight 页面可视区域的宽高document.documentElement.clientWidth document.documentElement.clientHeight 页面某个元素真实的宽高document.getElementB...
JavaScript DOM对象的尺寸和位置详解
zhishunet
01-25 923
在DOM对象操作中，其尺寸和位置也是DOM的核心内容，因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作，特别是js动画效果。
深度解析DOM尺寸与位置：clientWidth、offsetWidth、scrollWidth、getBoundingClientRect() 一网打尽
编码行者的博客
12-20 1546
获取元素内容区域的宽度，不包括边框和滚动条。：获取元素相对于其父元素的偏移宽度，包括边框、内边距和滚动条。：获取元素内容的总宽度，包括溢出的部分。：获取元素相对于视口的位置和大小信息。在实际应用中，根据具体的需求选择合适的属性或方法来获取元素的尺寸和位置信息，可以更灵活地处理 DOM 操作。
JS操作DOM元素的属性与方法全攻略
JS操作DOM元素属性和方法是网页动态交互的关键技术。通过此技术，开发者可以读取、添加、修改或删除网页中的元素和属性，从而实现复杂的用户界面功能。 ### DOM结构基础 DOM将HTML文档视为树形结构，每个HTML元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值