【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect

本文主要是介绍【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

概要

在JavaScript中,我们常常要获取某个 HTML 元素的尺寸。但是在js中,我们往往能获取好几种尺寸,这几种尺寸的区别是什么呢?本文给出详细解析。

clientWidth与clientHeight

clientWidth表示某个元素的可见宽度(即元素内容区域的宽度),clientHeight表示某个元素的可见高度(即元素内容区域的宽度)。
它的计算规则只包括内容和内边距,不包括边框、滚动条和外边距。
例如clientWidth = content + padding(左右两个padding都要计算上)。
例如clientHeight = content + padding(上下两个padding都要计算上)。

offsetWidth与offsetHeight

offsetWidth表示某个元素的总宽度,offsetHeight表示某个元素的总高度
它的计算规则只包括内容和内边距和边框,不包括滚动条和外边距。
例如clientWidth = content + padding + border(左右两个padding、border都要计算上)。
例如clientHeight = content + padding + border(上下两个padding、border都要计算上)。

scrollWidth与scrollHeight

offsetWidth表示某个元素的内容区域的总宽度,包括被隐藏在视口之外的部分,offsetHeight同理。
它的计算规则只包括内容和内边距,不包括边框、滚动条和外边距。
但是有一点要特别注意:当content的区域过大以至于超过元素区域时,其scrollWidth与scrollHeight按照内容区域的宽高来算来算,包括visible和invisible两部分;如果content没有超过元素区域,则scrollWidth和scrollWidth计算方式相同,scrollHeight同理。

rect尺寸

通过调用dom元素的getBoundingClientRect()方法,我们能获得一个对象,这个对象里面记录了这个元素的width、height(当然还有top、bottom等位置信息)。这个属性与offsetWidth类似,其计算时包括元素的内容内边距边框

但是从浏览器渲染原理来看,这个尺寸与前三个尺寸有很大的不同!
clientWidth、offsetWidth、scrollWidth三种属性尺寸都属于layout tree(布局树)里的尺寸,是静态的,而getBoundingClientRect()方法拿到的尺寸是属于用户最终看到的尺寸。
一句话,如果这个元素不涉及transform变换的话,rect尺寸和offset相同;如果元素应用了transform变换,rect尺寸是经过变换后的尺寸,即用户最终看到的尺寸!

这篇关于【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145764

相关文章

【无标题】免费录屏工具推荐,除了OBS还有这几款你也应该试试!

在寻找一款免费且高效的录屏软件时,除了OBS,市场上还有其他多种选择。本文将为您介绍五款易于操作的录屏工具,它们能够满足您在制作教程视频、游戏直播或视频演示时的需求。 首选推荐:嗨格式录屏大师 嗨格式录屏大师以其全面的录制模式(包括全屏、进程、摄像头等七种模式)在视频录制领域占据一席之地。该软件在录制过程中提供工具栏,支持画面标注、聚光灯、高亮等操作,同时具备计划任务录制和自动分段录制

【无标题】使用Go (或者 Python) 执行外部命令,直接模式和 Shell模式的区别

有时,我们需要通过编程语言执行外部程序、命令或脚本。 Go 语言里提供了 “os/exec” 库,Python 里面也提供了 subprocess 这样的库。 但在具体调用外部命令时,有两种方式: 直接调用外部命令通过 Shell 调用外部命令 以 Go 语言为例: cmd := exec.Command("./myscript.sh", "arg1", "arg2") // 直接执行外

【无标题】【Datawhale X 李宏毅苹果书 AI夏令营】批量归一化

1、批量归一化的作用 批量归一化(Batch Normalization,BN)的把误差曲面变得平滑,使训练能够得到快速收敛; 训练过程的优化:使用自适应学习率等比较进阶的优化训练方法; 训练对象的优化:批量归一化可以改变误差表面,让误差表面比较不崎岖 参数 w i w_i wi​是指训练参数或者训练的目标 1.1 特征归一化 当输入的特征,每一个维度的值,它的范围差距很大的时候,我们就可能

JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比

1. style 属性 style 属性用于直接访问和修改元素的内联样式。通过 JavaScript,可以动态更改元素的样式,但只能操作元素的内联样式,即通过 HTML 中的 style 属性定义的样式。 基本用法: const element = document.getElementById("myElement");// 修改内联样式element.style.color = "re

【无标题】html前段小知识点

1. 什么是HTML? 超文本标记语言是一种 用于创建网页的标准标记语言 HTML 文档包含了HTML 标签及文本内容 也叫文档1.什么是css? CSS (层叠样式表),是一种用来为结构化文档添加样式的计算机语言,CSS 文件扩展名为 .css。 可以设置多种布局,样式前端页面 不是编程语言是标记语言 2. 对WEB标准以及W3C的理解与认识 Web由三部分组成 结构 表现 跟行为 w

【无标题】XSS安全防护:responseBody (输入流可重复读) 配置

接上文:配置XSS过滤器 XXS 安全防护:拦截器+注解实现校验-CSDN博客XSS(跨站脚本)攻击是一种网络安全威胁,允许攻击者注入恶意脚本到看似安全的网站。当用户浏览这些被注入恶意代码的网页时,恶意脚本会在用户的浏览器环境中执行,这可能导致多种安全问题,如窃取敏感数据、劫持用户会话等。这些攻击利用了应用程序对用户输入处理不当的问题。预防方法包括输入验证、输出编码等。https://blog

【无标题】标准电极电势表

标准电极电势 Standard Electrode Potentials 序号(No.) 电极过程(Electrode process) EÅ/V 1 Ag++e═Ag 0.7996 2 Ag2++e═Ag+ 1.980 3 AgBr+e═Ag+Br- 0.0713 4 AgBrO3+e═Ag+BrO3- 0.546 5 AgCl+e═Ag+Cl- 0.2

js中getBoundingClientRect()获取某个元素相对于视窗的位置集合

转载:https://www.jianshu.com/p/824eb6f9dda4 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。语法:这个方法没有参数。rectObject = object.getBoundingClientRect();返回值类型 返回值解释rectObject.top元素上边到视窗上边的距离;rectObje

【无标题】es搜索基本操作

一,准备数据 1.创建索引      PUT /lagou-book/ 2.创建mapping PUT /lagou-book/doc/_mapping{"properties":{"description":{"type":"text","analyzer":"ik_max_word"},"name":{"type":"text","analyzer":"ik_max_word"},"