当前位置：首页 > news >正文

[前端]Javascript获取元素宽度

news 来源：原创 2025/8/18 21:28:25

元素宽度属性对比示意图

+----------------------------------+
|          外边距（margin）         | 
+---+--------------------------+---+
|   |       边框（border）       |   | 
|   +--------------------------+   |
|   |       内边距（padding）     |   |
|   |  +---------------------+  |   |
|   |  |      内容（content）   |  |   |
|   |  +---------------------+  |   |
|   |                          |   |
+---+--------------------------+---+

各属性覆盖范围标注

clientWidth
• 范围：内容宽度 + 内边距（绿色区域）

• 公式：content + padding

• 用途：计算元素可视区域内部可用空间。
offsetWidth
• 范围：内容宽度 + 内边距 + 边框（绿色 + 黄色区域）

• 公式：content + padding + border

• 用途：获取元素实际占用的总布局宽度。
scrollWidth
• 范围：内容总宽度（包括溢出部分） + 内边距（绿色 + 灰色溢出区域）

• 公式：content（含溢出） + padding

• 用途：检测元素内部是否有隐藏内容。
getBoundingClientRect().width
• 范围：同 offsetWidth（若为标准盒模型）

• 特殊说明：若元素设置 box-sizing: border-box，则等于 CSS 设置的 width 值。

关键区别总结

属性/方法	包含内容	是否包含滚动条	典型场景
`clientWidth`	内容 + 内边距	否	布局调整、内部空间计算
`offsetWidth`	内容 + 内边距 + 边框	是（若存在）	动画、拖拽、总占用空间
`scrollWidth`	内容（含溢出） + 内边距	否	检测溢出、动态内容宽度
`getBoundingClientRect()`	内容 + 内边距 + 边框（标准盒模型）	是（若存在）	精准定位、复杂布局计算

在前端开发中，获取元素宽度的常用方法主要分为原生 JavaScript 和辅助库（如 jQuery）两类。以下是综合不同场景和需求的实现方式：

一、原生 JavaScript 方法

clientWidth
• 用途：获取元素的可视区域宽度，包括内容宽度和内边距，但不包括边框、滚动条和外边距。

• 适用场景：需要计算元素内部可用空间时（如布局调整）。

• 示例：

const width = element.clientWidth;

offsetWidth
• 用途：获取元素的布局宽度，包括内容、内边距、边框和滚动条（如果存在）。

• 适用场景：需要精确计算元素占据的实际空间（如拖拽或动画）。

• 示例：

const width = element.offsetWidth;

scrollWidth
• 用途：返回元素内容的总宽度（包括溢出部分），不包含滚动条但包含内边距。

• 适用场景：处理内容溢出的动态布局（如自适应滚动区域）。

• 示例：

const width = element.scrollWidth;

getBoundingClientRect()
• 用途：返回元素相对于视口的位置和尺寸对象，包含 width 属性（包含边框和滚动条）。

• 适用场景：需要同时获取元素的位置和尺寸（如定位浮层）。

• 示例：

const rect = element.getBoundingClientRect();
const width = rect.width;

window.getComputedStyle()
• 用途：获取元素计算后的 CSS 样式值（字符串形式），需手动解析数值。

• 适用场景：需要获取精确的 CSS 样式值（如百分比或 calc() 表达式）。

• 示例：

const style = window.getComputedStyle(element);
const width = parseFloat(style.width);

二、辅助库方法（jQuery）

.width()
• 用途：获取元素内容宽度（不包含内边距和边框）。

• 示例：

const width = $('#element').width();

.outerWidth()
• 用途：获取包含内边距和边框的总宽度（通过参数可包含外边距）。

• 示例：

const width = $('#element').outerWidth(true); // 包含外边距

三、关键区别与注意事项

盒模型影响：
• clientWidth 对应 CSS 标准盒模型的 content + padding。

• offsetWidth 对应 content + padding + border + scrollbar（若存在）。
动态内容处理：
• scrollWidth 适用于内容溢出的动态宽度计算。

• getBoundingClientRect() 会实时更新，适合响应式布局。
兼容性与性能：
• 避免频繁操作 DOM，建议缓存元素引用。

• element.style.width 仅能获取内联样式，非内联样式需用 getComputedStyle。

四、总结与建议
• 简单布局：优先使用 offsetWidth 或 clientWidth。

• 动态内容：结合 scrollWidth 和 getBoundingClientRect()。

• 精确样式值：使用 getComputedStyle 解析 CSS 属性。

具体选择需结合场景，例如需要边框时用 offsetWidth，仅内容宽度用 clientWidth。对于复杂项目，可封装工具函数统一处理。

[前端]Javascript获取元素宽度

元素宽度属性对比示意图 ---------------------------------- | 外边距（margin） | -------------------------------- | | 边框（border） | | | -------------------------- | | | …...

编程日记 2025/8/18 21:28:25

MySQL + Qwen3-0.5B + Flask + Dify 工作流部署指南

1. 安装MySQL和PyMySQL 安装MySQL # 在Ubuntu/Debian上安装 sudo apt update sudo apt install mysql-server sudo mysql_secure_installation# 启动MySQL服务 sudo systemctl start mysql sudo systemctl enable mysql 安装PyMySQL pip install pymysql 使用 apt 安装 My…...

编程日记 2025/8/19 3:36:05

项目三 - 任务3：学生多态方式喂养宠物

在本次实战中，我们通过创建动物类及其子类（猫、狗、鸟），并设计学生类的喂养方法，深入学习了Java中的多态和方法重载。学生类通过重载方式为每种动物提供专门的喂养方法，而通过多态方式则仅用一个方法即可喂…...

编程日记 2025/8/18 0:09:15

TypeScript速成

1、类型推断这里的str已经推断为string类型，不能像JavaScript一样直接给str赋值number类型 2、类型注解 let str:stringabc 或者 let str:string strabc 3、类型断言因为typescript会判定这个item可能为undefined类型，但是我们人为可以确定item一…...

编程日记 2025/8/18 0:09:13

CompletableFuture的底层ForkJoinPool

什么是 ForkJoinPool？它和普通线程池（ThreadPoolExecutor）有什么区别？ 答案要点： ForkJoinPool 是 Java 7 引入的线程池，专为分治任务设计，支持递归任务拆分（Fork）和…...

编程日记 2025/8/17 9:17:45

高等数学第五章---定积分（§5.1定积分的概念、性质和应用）

5.1 定积分的概念及性质一、引例在学习定积分之前，我们先通过两个具体的例子来感受其思想和方法。例1 曲边梯形的面积定义：曲边梯形由连续曲线 y f ( x ) y f(x) yf(x)（假设 f ( x ) ≥ 0 f(x) \ge 0 f(x)≥0 在所讨论的区间上&…...

编程日记 2025/8/17 10:30:56

Java基础学完，继续深耕（0506）SQL--多表关系

多表关系一对多(多对一) 一对一多对多一对多场景：部门与员工的关系 （一个部门下有多个员工）。实现：在数据库表中多的一方，添加字段，来关联一的一方的主键。现在只是在语法上关联了，…...

编程日记 2025/8/17 10:33:13

python打卡day17

聚类的基础知识知识点聚类的指标聚类常见算法：kmeans聚类、dbscan聚类、层次聚类三种算法对应的流程实际在论文中聚类的策略不一定是针对所有特征，可以针对其中几个可以解释的特征进行聚类，得到聚类后的类别，这样后续进行解释也…...

编程日记 2025/8/17 8:30:11

洛谷---P1629 邮递员送信

题目描述有一个邮递员要送东西，邮局在节点 1。他总共要送 n−1 样东西，其目的地分别是节点 2 到节点 n。由于这个城市的交通比较繁忙，因此所有的道路都是单行的，共有 m 条道路。这个邮递员每次只能带一样东西，并且运…...

编程日记 2025/8/18 0:09:01

第11次：用户注册(简要版)

1、定义模板在templates文件夹下边新建register.html，代码如下： <html lang"en"> <head><meta charset"UTF-8"><title>注册</title> </head> <body><!--{%是模板标签， …...

编程日记 2025/8/18 0:08:59

【IP101】图像特征提取技术：从传统方法到深度学习的完整指南

🌟 特征提取魔法指南 🎨 在图像处理的世界里，特征提取就像是寻找图像的"指纹"，让我们能够识别和理解图像的独特性。让我们一起来探索这些神奇的特征提取术吧！ 📚 目录基础概念 - 特征的"体…...

编程日记 2025/8/17 9:10:05

对windows的简单介绍

目录一、Windows 操作系统概述 1. 定义与定位 2. 核心目标二、历史与版本演变 1. 早期阶段（1985–1995） 2. NT 内核时代（1996–2009） 3. 现代操作系统（2012–至今） 三、系统架构与技术特性 1. 内…...

编程日记 2025/8/18 22:03:03

Waymo公司正在加快其位于亚利桑那州新工厂的无人驾驶出租车（robotaxi）生产进度

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/8/17 14:29:31

JavaSE核心知识点01基础语法01-03（流程控制：顺序、分支、循环）

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 JavaSE核心知识点01基础语法01-03&#xff0…...

编程日记 2025/8/17 8:58:07

信息论01：从通信到理论的飞跃

信息论01：从通信到理论的飞跃 1. 信息论的诞生与发展 1.1 前信息论时代（1920s之前） 信息与消息的混淆：传统认知中将信息等同于消息本身先驱者奠基： 哈里奈奎斯特 (1924)：提出《影响电报速度的某些因素》…...

编程日记 2025/8/18 13:51:39

Pandas 的透视与逆透视

目录 1. 透视 1.1 pivot 1.2 pivot_table 2.逆透视 1. 透视透视是长表变宽表。 pivot() 和 pivot_table()两个函数都可以做到，后者可以聚合前者不行。特性df.pivot()df.pivot_table()重复值处理要求索引和列的组合唯一，否则报错 ValueError允许…...

编程日记 2025/8/17 10:39:25

AI大模型驱动的智能座舱研发体系重构

随着AI大模型（如LLM、多模态模型）的快速发展，传统智能座舱研发流程面临巨大挑战。传统座舱研发以需求驱动、功能固定、架构封闭为特点，而AI大模型的引入使得座舱系统向自主决策、动态适应、持续进化的方向发展。因此思考并提出一…...

编程日记 2025/8/18 20:59:45

【东枫科技】代理英伟达产品：DPU

NVIDIA BlueField-3 DPU 400Gb/s 基础设施计算平台 NVIDIA BlueField -3 数据处理单元 (DPU) 是第三代基础设施计算平台，使企业能够构建从云端到核心数据中心再到边缘的软件定义、硬件加速的 IT 基础设施。借助 400Gb/s 以太网或 NDR 400Gb/s InfiniBand 网络连接…...

编程日记 2025/8/17 2:50:22

【KWDB 创作者计划】一文掌握KWDB的时序表管理

前言本文是在对时序数据库有一定了解，并且KWDB的数据库操作了解后进行学习的文章安排，如果对时序数据库与KWDB的数据库操作还不怎么了解的可以查阅官网的文档进行提前学习，当有了这些基础后，本文就是对时序数据表的一个管理操作…...

编程日记 2025/8/17 9:25:33

《算法导论(第4版)》阅读笔记：p9-p9

《算法导论(第4版)》学习第 6 天，p9-p9 总结，总计 1 页。一、技术总结 1. data structure A data structure is a way to store and organize data in order to facilitate access and modifications(数据结构是一种存储和组织数据的方式&#xff0c…...

编程日记 2025/8/17 10:02:17

Facebook隐私保护措施的优缺点解析

在这个数字化的时代，隐私保护已成为公众关注的热点话题。Facebook，作为全球最大的社交媒体平台之一，其隐私保护措施自然也受到了广泛的关注和讨论。本文将对Facebook的隐私保护措施进行解析，探讨其优点与缺点，并探讨如…...

编程日记 2025/8/17 10:05:29

深入了解linux系统—— 进程地址空间

前言程序地址空间在之前，我们学习C/C时，多多少少都看过这样的一张图我们现在通过下面这一段代码看一下： #include <stdio.h> #include <unistd.h> #include <stdlib.h> int g_unval; int g_val 100; int main(int…...

编程日记 2025/8/17 8:30:47

电动加长杆金属硬密封法兰式蝶阀泄漏等级解析：水、蒸汽、油品介质的可靠选择-耀圣

电动加长杆金属硬密封法兰式蝶阀泄漏等级解析：水、蒸汽、油品介质的可靠选择在工业流体控制领域，电动金属硬密封蝶阀凭借其卓越的密封性能和耐高温高压特性，成为水、蒸汽、油品等介质的核心控制设备。其泄漏等级作为衡量阀门性能的关键指标…...

编程日记 2025/8/17 8:30:43

win11共享打印机主机设置

1.首先打开设置，选择打印机和扫描仪点击打印机属性，将共享窗口的共享这台打印机和在客户端计算机上呈现打印作业这两项勾选上。 2.通过cmd命令 gpedit.msc 打开本地组策略编辑器。 3.网络访问选择仅来宾 4.将账户来宾状态选择启用 5.将拒绝从网络访问这台…...

编程日记 2025/8/17 6:29:06

Flowable7.x学习笔记（二十）查看流程办理进度图

前言本文是基于继承Flowable的【DefaultProcessDiagramCanvas】和【DefaultProcessDiagramGenerator】实现的自定义流程图生成器，通过自定义流程图生成器可以灵活的指定已经执行过的节点和当前正在活跃的节点样式，比如说已经执行完成的节点我们标绿&…...

编程日记 2025/8/17 10:52:40

【计算机网络第8版】谢希仁编著第四章网络层地址类题型总结

小结个人觉得地址类在网络层算好做的题，这部分知识本身并不多，理解到位了就是2进制和10进制的换算题了。而且这种题给你一小时例题和标答，肯定自己都能悟出来。但是计网网络层的整体我感觉很散，老师讲的也乱七八糟的&#xff0c…...

编程日记 2025/8/18 22:03:05

一种基于条件生成对抗网络（cGAN）的CT重建算法

简介简介：该文提出了一种基于条件生成对抗网络（cGAN）的CT重建算法，通过引入CBAM注意力机制增强网络对关键特征的提取能力，有效解决了CT成像中因噪声干扰导致的重建精度下降问题。实验采用固体火箭发动机模拟件数据集，将正弦图分为五组并添加不同程度的噪声进行训练。结…...

编程日记 2025/8/17 9:43:48

欧拉系统（openEuler）上部署OpenStack的完整指南 ——基于Yoga版本的全流程实践

（资源区里有上传的配置好的openstack镜像） 一、环境规划与前置准备 1. 硬件与节点规划升级存储节点（可选）：若需Cinder后端，建议配置SSDHDD混合存储网络拓扑强化： 管理网络：启用V…...

编程日记 2025/8/17 10:47:50

oceanbase不兼容SqlSugarCore的问题

问题发现 C#程序使用SqlSugarCore5.1.4.166进行数据库操作，而且项目需要在多台服务器上面部署，结果发现A服务器部署运行没有问题， B服务器部署却报错：SqlSugar.SqlSugarException:Connect timeout expired. 但是我们的C#代码是一…...

编程日记 2025/8/18 21:35:29

深入理解分布式锁——以Redis为例

一、分布式锁简介 1、什么是分布式锁分布式锁是一种在分布式系统环境下，通过多个节点对共享资源进行访问控制的一种同步机制。它的主要目的是防止多个节点同时操作同一份数据，从而避免数据的不一致性。线程锁： 也被称为互斥锁&#xff08…...

编程日记 2025/8/17 10:26:35

OrangePi Zero 3学习笔记（Android篇）1 - 搭建环境

目录 1. 下载安装Ubuntu22.04 1.1 安装增强功能 1.2 设置共享文件夹 1.3 创建AOSP.vdi 1.4 更新相关软件包 2. 解压AOSP源代码 3. 编译代码 3.1 编译uboot/Linux 3.2 编译AOSP源代码 3.3 内存问题调试记录 3.3.1 查看具体什么问题 3.3.2 关闭dex2oat（无…...

编程日记 2025/8/18 0:08:22

RabbitMq(尚硅谷)

RabbitMq 1.RabbitMq异步调用 2.work模型 3.Fanout交换机（广播模式） 4.Diret交换机（直连） 5.Topic交换机（主题交换机，通过路由匹配） 6.Headers交换机（头交换机） 6…...

编程日记 2025/8/18 16:19:00

OpenAI的“四面楚歌”：从营利到非营利，一场关于AGI控制权的革命

引言当“奥特曼妥协”与“四面楚歌”并置时，OpenAI的这次重大调整，仿佛在科技史上投下一颗震撼弹。这家曾因“拒绝盈利”而备受争议的人工智能公司，如今却在资本与理想之间艰难抉择——放弃营利性转型，回归非营利初心。这不仅是对…...

编程日记 2025/8/17 10:45:23

[250505] Arch Linux 正式登陆 Linux 的 Windows 子系统

目录 Arch Linux 正式登陆 Windows Subsystem for Linux (WSL) Arch Linux 正式登陆 Windows Subsystem for Linux (WSL) Arch Linux 社区与 Microsoft 合作，正式宣布 Arch Linux 现已提供官方的 Windows Subsystem for Linux (WSL) 镜像。这意味着 Windows 用户现…...

编程日记 2025/8/18 0:08:16

MySQL 日期格式化：DATE_FORMAT 函数用法

MySQL 日期格式化：DATE_FORMAT 函数用法在 MySQL 中，DATE_FORMAT() 函数用于将日期或时间值格式化为指定的字符串格式。正确语法 DATE_FORMAT(date, format)常用格式说明符说明符描述%Y四位数的年份（例如：2023）…...

编程日记 2025/8/17 2:08:54

java springboot解析出一个图片的多个二维码

引入 <dependencies><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.1</version></dependency><dependency><groupId>com.google.zxing…...

编程日记 2025/8/18 17:26:07

【四川省专升本计算机基础】第一章计算机基础知识（上）

前言对计算机专业的同学来说这门课程可能很简单，容易拿高分（125分以上），但也可能很容易大意丢分。因为本门课程人称：背多分。大意丢分者的心态觉得计算机基础都学过，内容很简单，最后才开始背计…...

编程日记 2025/8/17 8:30:26

406错误，WARN 33820 --- [generator] [nio-8080-exec-4] .w.s.m.s.DefaultHa

在接口调用过程中，后端出现.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: No acceptable representation]错误。检查了一个小时才发现我返回的对象没有写getter方法， 当Spring B…...

编程日记 2025/8/17 8:30:24

基于STM32、HAL库的SST26VF064B NOR FLASH存储器驱动应用程序设计

一、简介： SST26VF064B是Microchip公司生产的一款64Mbit(8MB)串行闪存器件，采用SPI接口通信，具有以下特点：工作电压：2.7-3.6V 最高104MHz时钟频率统一4KB扇区结构快速擦除和编程时间低功耗特性支持标准SPI、Dual SPI和Quad SPI模式二、硬件接口: STM32L4引脚SST26V…...

编程日记 2025/8/17 8:30:32

美信监控易：全栈式自主可控的底层架构优势

在当今数字化时代，企业的运维管理面临着越来越多的挑战。为了确保业务的稳定运行，企业需要一款高效、可靠的运维管理软件。北京美信时代的美信监控易运维管理软件，以其全栈式自主可控的底层架构优势，成为了运维团队的理想选择。 …...

编程日记 2025/8/17 8:30:35

Class AB OPA corner 仿真，有些corenr相位从0开始

Class AB OPA做 STB 仿真时，会遇到有些corner(c0_0、c0_4、c0_5)相位从0开始的情况。首先应该去检查电路，电路里是否有正反馈；排除没有正反馈后，考虑是图中的红框中的线性跨导环中的Vds 太大导致了碰撞电离导致的。查找了网上…...

编程日记 2025/8/17 8:30:23

【JEECG】BasicTable单元格编辑，插槽添加下拉组件样式错位

1.功能说明 BasicTable表格利用插槽，添加组件实现单元格编辑功能，选择组件下拉框错位 2.效果展示 3.解决方案插槽内组件增加：:getPopupContainer"getPopupContainer" <template #salesOrderProductStatus"{ column, re…...

编程日记 2025/8/17 8:37:25

第十五届蓝桥杯单片机国赛-串口解析

串口通信像是蓝桥杯单片机组国赛中一个若隐若现的秘境，总在不经意间为勇者们敞开大门。然而，初次探索这片领域的冒险者，常常会被其神秘莫测的特性所震慑，黯然退场（编不下去了，直接进入正题）。附…...

编程日记 2025/8/17 8:37:02

Flutter开发HarmonyOS实战-鸿蒙App商业项目

Flutter开发HarmonyOS实战内容介绍： Flutter开发HarmonyOS 鸿蒙App商业项目（小米商城APP）实战视频教程 Flutter开发鸿蒙APP是在《FlutterGetx仿小米商城》项目基础之上讲解的，调试Flutter HarmonyOS应用需要有HarmonyOS Next的手机…...

编程日记 2025/8/18 19:31:39

【回眸】香橙派Zero2 超声波模块测距控制SG90舵机转动

前言知识准备超声波模块时序图 gettimeofday()函数作用 gettimeofday()函数原型 tv结构体获取当前系统时间与格林威治时间的时间差获取香橙派数10万秒花费的时间使用超声波模块获取到障碍物距离 SG90舵机模块舵机模块的作用舵机模块方波时序图舵机模块工作原…...

编程日记 2025/8/19 0:04:24

RabbitMQ 添加新用户和配置权限

以下是关于使用 sudo rabbitmqctl add_user 命令创建新用户的详细示例，同时包含创建用户后进行权限设置、角色设置等相关操作的示例。 1. 前提条件确保你的 RabbitMQ 服务已经正常运行，并且你具有执行 sudo 命令的权限。 2. 创建新用户假设我们要创…...

编程日记 2025/8/17 9:22:07

【前缀和】矩阵区域和

文章目录 1314. 矩阵区域和解题思路1314. 矩阵区域和 1314. 矩阵区域和给你一个 m x n 的矩阵 mat 和一个整数 k ，请你返回一个矩阵 answer ，其中每个 answer[i][j] 是所有满足下述条件的元素 mat[r][c] 的和： i - k <= r <= i + k, j - k <= c <= j + k …...

编程日记 2025/8/17 8:31:08

编程日志4.25

栈的stl模板可直接用<stack>库进行调用 #include<iostream> #include<stack>//栈的模板库 using namespace std; int main() { stack<int> intStk;//整数栈 stack<double> doubleStk;//浮点数栈 intStk.push(1); intStk.pu…...

编程日记 2025/8/18 19:35:42

【中间件】brpc之工作窃取队列

文章目录 BRPC Work Stealing Queue1 核心功能2 关键数据结构2.1 队列结构2.2 内存布局优化 3 核心操作3.1 本地线程操作（非线程安全）3.2 窃取操作（线程安全） 4 设计亮点4.1 无锁原子操作4.2 环形缓冲区优化4.3 线程角色分离 5 性…...

编程日记 2025/8/17 10:35:45

用OMS从MySQL迁移到OceanBase，字符集utf8与utf8mb4的差异

一、问题背景在一次从MySQL数据库迁移到OceanBase的MySQL租户过程中，出现了一个转换提示： [WARN][CONVER] he table charset:utf8->utf8mb4， 你可能会担心这种转换可能导致字符集不兼容的问题。但通过查阅相关资料可知，utf8m…...

编程日记 2025/8/17 6:55:49

相关文章：