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

最新推荐文章于 2024-08-20 10:41:40 发布
最新推荐文章于 2024-08-20 10:41:40 发布
阅读量619 收藏
点赞数
分类专栏： HTML5 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sofeien/article/details/54946898
版权

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

.clientHeight .clientWidth   

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

.scrollHeight .scrollWidth

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

.offsetHeight .offsetWidth

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


侠之大者为国为民
关注
专栏目录
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
汪子熙的专家技术分享
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
《地理信息系统概论》课后习题全部答案_黄杏元
「 刘一哥与GIS的故事」
08-14 6384
第一章 地理信息系统导论 1、什么是地理信息系统（GIS）？它与一般计算机应用系统有哪些异同点？ 答：地理信息系统：是由计算机硬件、软件和不同的方法组成的系统，该系统设计支持空间数据的采集、管理、处理、分析、建模和显示，以便解决复杂的规划和管理问题。 GIS脱胎于地图学，是计算机科学、地理学、测绘遥感学、环境科学、城市科学、空间科学、信息科学和管理科学等众多学科交叉融合而成的新兴学科。但是，地理信息系统与这学科和系统之间既有联系又有区别： （1）GIS与机助制图系统：机助制图是地理信息系统得主要技.
DOM中的宽高
weixin_30851867的博客
07-08 102
jQuery中： .height()-----------代表元素本身的高度 .innerHeight()-----------代表元素的高度(包括内容高度height+内边距padding) .outerHeight()-----------代表元素的高度(包括内容高度height+内边距padding+边框border) .outerHeight(true)----------...
详解各种获取元素宽高及位置的属性
weixin_30887919的博客
04-15 206
offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(wi...
网页中宽度、高度及各种长度详解
最新发布
m0_67793437的博客
08-20 868
在网页开发中，DOM 元素的尺寸不仅包括宽度和高度，还包括各种与元素位置、偏移和滚动相关的长度属性。本文将详细介绍 DOM 中与宽度、高度及各种长度相关的属性和方法，并介绍如何在网页布局中有效使用这些属性。
DOM中获取宽高、位置总结
banketan1026的博客
12-30 225
原生JS 一、文档、窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen.availHeight | window.screen.availWidth // 浏览器窗口可见区域宽高 window.innerHeight ≈ documen...
关于元素宽高、边距属性及应用
躺赢啊
12-13 226
一、属性定义 1、width: auto 默认值。浏览器可计算出实际的宽度。 length 使用 px、cm 等单位定义宽度。 % 定义基于包含块（父元素）宽度的百分比宽度。 inherit 规定应该从父元素继承 width 属性的值。 2、padding length： 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px % ： 规定基于父元素的宽度的百分比的填充 inherit...
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
qq_55154022的博客
11-20 458
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
编写高质量代码改善JavaScript程序的188个建议(1-78).docx
05-10
在编写高质量的JavaScript程序时，遵循一定的编程原则和最佳实践至关重要。这188个建议旨在帮助开发者提高代码质量和性能，以下是对前78个建议的详细解释。 建议1：警惕Unicode乱码 JavaScript是基于Unicode标准的...
xml，xsl，xslt，xsd，uddi，wsdl，soap辨析
cesium的专栏
04-09 3934
xml 所用的标签可以为用户自定义标签，主要存储数据信息和内容以下都应用在xml中：xsl是可扩展样式语言，是对xml的内容进行逻辑控制，其版本标准一般是在1999年之前定义的xslt为可扩展样式表语言转换，是xsl的一部分，xsl的功能主要有两个，一个是xml标签转换，主要体现在从一种xml形式转换到另一种xml形式；还有一个就是对xml进行格式化，即用样式进行润色，渲染；xslt的
获取浏览器及Dom宽高
thingir的博客
08-14 296
参考文章： https://blog.csdn.net/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 2737
dom.clientwidth
JavaScript之元素宽高及事件对象距离属性的介绍
weixin_44827643的博客
06-28 516
本文主要介绍元素的不同宽高及距离属性，包括clientWidth、offsetWidth等一些容易混淆的属性。（1）元素属性1.offsetWidth和offsetHeight获取元素的宽高，包含边框2.clientWidth和clientHeight获取元素的宽高，不包含边框3.clientTop和clientLeft分别获取元素上边框和左边框的宽度4.offsetTop和offsetLeft分别获取元素距离整个页面（包含未显示的区域）顶部和左侧的距离（2）事件对象属性1.offsetX和offsetY表
DOM元素大小
weixin_30578677的博客
05-21 105
一、偏移量 偏移量包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过下列4个属性可以取得元素的偏移量。 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以...
DOM元素的各种宽度和高度
行成于思毁于随
01-29 2380
DOM元素的各种高度和宽度可以用js直接获取，也可以用JQuery获取，但它们的函数很多，容易搞混 博主在做一个滚动加载更多列表的时候，也曾因为获取高度的方法使用不当，造成部分手机不兼容，根据自己在网上查的资料和经验，这里进行详细说明： Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.
dom中的元素尺寸属性
赵佳敏的博客
12-03 972
目录一、尺寸属性1. offsetHeight、offsetWidth---网页可见区域宽高（含边框）2. clientHeight、clientWidth---网页可见区域宽高（不含边框）3. style.width、style.height----内容区域的宽高4. scrollWidth、scrollHeight----网页正文全文宽高（包括不可见部分）二、元素偏移1. offestTop---------上偏移2. offsetLeft---------左偏移三、两个滑动距1. scrollTop.
理解DOM元素中的各类宽高
XFCY514728的博客
05-14 411
页面宽高(整个页面)document.documentElement.scrollWidth document.documentElement.scrollHeight 页面可视区域的宽高document.documentElement.clientWidth document.documentElement.clientHeight 页面某个元素真实的宽高document.getElementB...
JavaScript DOM对象的尺寸和位置详解
zhishunet
01-25 757
在DOM对象操作中，其尺寸和位置也是DOM的核心内容，因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作，特别是js动画效果。
深入解析DOM元素对象的属性与方法
本文档深入解析了JavaScript (JS) 基础中DOM（Document Object Model，文档对象模型）元素对象的属性和方法。在DOM中，HTML文档被分解为一系列节点，这些节点构成了层次结构，包括文档节点、元素节点、属性节点、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值