js style.width获取不到元素的宽度

js获取页面及个元素高度、宽度的代码 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(ff):document.body.scrollTop; 网页被卷去的高(ie): do 立即下载

jquery用习惯了,用width()就能获取元素的宽度,但有些时候用js获取元素宽度获取不到,document.getElementById("id").style.width,原因:

1.元素未设置宽度值

2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。

虽然这种方式获取不到元素宽度,但是可以设置宽度 document.getElementById("id").style.width = "100px";

只有将元素的宽度设置成内嵌式,才能通过document.getElementById("id").style.width获取宽度

<p id="p1" style="width:100px;"></p>

对于没有设置宽度的元素、亦或CSS样式非内嵌式的,js原生写法可以通过offsetWidht来获取宽度。

jquery的width()与js的offsetWidth都可以获取元素的宽度,但有个区别:
.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。
offsetWidth :包括了内补丁和border,不包括外补丁。

SIGIR 2026:信息检索前沿技术与投稿指南 信息检索(Information Retrieval, IR)是计算机科学中处理大规模数据检索的核心技术,其基本原理是通过算法模型从海量数据中高效提取相关信息。随着深度学习的发展,神经信息检索(Neural IR)和多模态检索成为研究热点,如稠密检索模型(DPR)和跨模态预训练(CLIP)等技术的应用显著提升了检索精度。这些技术不仅在学术领域具有重要价值,还在电商搜索、医疗检索等实际场景中展现出巨大潜力。SIGIR作为信息检索领域的顶级会议,汇聚了全球顶尖学者和工业界专家,是展示最新研究成果的重要平台。本文 阅读详情

相关推荐

工作中SVN的使用,保姆级教程!

SVN是一款集中式版本控制系统,采用客户端-服务器模式管理代码版本。与Git相比,SVN在目录权限控制、大型二进制文件处理等方面具有优势,适合特定场景使用。本文介绍了SVN的安装方法、基本操作(检出、提交、更新、回滚等)以及分支管理(创建、合并、切换)。同时讲解了文件冲突的解决方法,并演示了如何在IDEA中集成SVN工具。SVN虽然逐渐被Git取代,但在某些特定场景下仍是可靠选择,工具选择应基于团队和项目需求。

胜人者有力,自胜者强! 1856

原生JS获取div元素的宽度

最近在做一个进度条组件,需要获取div元素的宽度。例如: <div id="myDiv" style="width: 200px; height: 200px; background-color: gray"> </div> 获取myDiv元素的宽度: var divWidth = document.getElementById("myDiv").st...

liubangbo的专栏 1万+

利用ArcMap实现遥感图像语义分割标注的完整流程解析

本文详细解析了利用ArcMap进行遥感图像语义分割标注的完整工作流。从工程创建、数据导入、SHP文件创建,到实战勾画地物、要素转栅格,再到最终的裁剪对齐,提供了每一步的关键操作与避坑指南。该方法特别适合处理大尺寸、带地理坐标的遥感影像,能高效产出精准对齐的图像-标签对,为后续深度学习模型训练奠定可靠的数据基础。

gpu4optimizer的博客 1217

js的 style.width 取不到元素的宽度值

以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。 今天想用原生JS想获取一个元素宽度时,写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。 总结...

weixin_30576859的博客 337

UR5双臂Gazebo仿真(Python)

近来在Gazebo上搭了一个ur5双臂仿真平台。 差不多就是以下这样。 使用rostopic list查看一下话题,如下 显然,采用/left_arm_controller/follow_joint_trajectory/goal和/right_arm_controller/follow_joint_trajectory/goal两个话题来控制双臂的运动。 现在的问题是,如何保证双臂运动的一致性,即如何能保证双臂能同时接受到以上两个消息。 思路一:设置/left_arm_controlle

qq_42823342的博客 2233

Python处理高光谱数据#3 降维

基于Python的高光谱降维操作 高光谱数据:点击此处可下载 用到的库:matplotlib、scipy、spectral 主要内容:主成分分析(PCA)与线性判别(LDA) 欢迎有兴趣的朋友交流指点。最后,废话不多说直接上代码???? import matplotlib.pyplot as plt from scipy.io import loadmat import spectral as spy

qq_273058791的博客 6939

js的offsetWidth获取不到宽高,一直为0的问题

js的offsetWidth获取不到宽高一直为0问题 之前在写一个页面遇到的问题,获取容器的宽度一直为0,就此记录以免错误再犯。 一,元素设置了display:none 用offsetWidth获取宽度将得到 0 我们给元素设置了display:none样式的话,获取宽高就会是0了。 (*)我遇到的问题是,我有一个容器本来是隐藏的,点击按钮之后显示,那我要怎么获取它的宽度呢? 我通过回调函数,在点击显示之后,执行回调函数里的offsetWidth获取宽度成功。 option(newMusicSwitchLi

Mayonnaise_Sann的博客 3992

基于STM32与SimpleFOC实现直流无刷电机开环控制的实战指南

本文提供了一份基于STM32微控制器与SimpleFOC开源库实现直流无刷电机开环控制的详细实战指南。内容涵盖硬件连接、PlatformIO环境搭建、核心代码解析及上电测试,旨在帮助开发者快速验证硬件并理解开环控制的基本原理,为后续实现高性能的闭环FOC控制奠定基础。

xxx12的博客 962

javascript中获取dom元素高度和宽度的方法如下

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidt...

对雪书空武 429

弹簧管压力表设计报告

精密机械课程设计 弹簧管压力表设计报告 2020年5月1日 目 录 第一章 设计任务概述... 3 1.1 课程设计目的... 3 1.2 设计任务... 3 1.3 技术指标... 3 第二章 压力表概述... 4 2.1 机械式压力表的组成部分... 4 2.2 工作原理... 4 第三章 压力表设计... 5 3.1 弹簧管参数设计... 5 3.2 曲柄滑块机构设计... ...

weixin_42163746的博客 6452

FPGA&ASIC笔面试题(四):编写Verilog代码描述跨时钟域信号传输,快时钟域到慢时钟域(补充)

      跨时钟域处理从快时钟域到慢时钟域,如果是下面第一个图,cklb则可以采样到signal_a_in,但是如果只有单脉冲,如第二个图,则不能确保采样掉signal_a_in。这个时候用两级触发器同步是没有用的。 代码如下: //Synchronous module Sync_Pulse( input clka, input clkb, input rst_n, input pulse_ina, output pulse_outb, ou

千歌叹尽执夏的博客 2511

js的style.width和offsetWidth问题

初学者总是会遇到各种各样的问题,我们都知道style.width和offsetWidth,但是用到的时候难免会出现一些问题,下面是我遇到的一些问题。。。 明明设置了width的值但是用js获取style.width的时候却为空,而offsetWidth不会 div{ background-color: red; height: 50px; width: 5

yuxiaoxia28的博客 5177

反爬虫:POST 请求参数中 Sign 的加密机制详解,并设计带 Sign 校验的网站

本文介绍了API请求中sign签名的生成原理及实现方法。sign是通过对请求参数加密生成的一串字符串,用于验证请求合法性,防止参数篡改、重放攻击和伪造请求。其生成步骤包括参数排序、拼接字符串、加盐和哈希加密。文章还演示了如何在FastAPI后端实现带sign验证的新闻网站,包括参数校验、时间戳验证和签名比对等安全措施,有效提升API安全性,增加爬虫逆向难度。

数据知道的博客 4079

style.width获取不到元素宽度

之前做一个需求,想要通过原生js的style.width获取元素的宽度,从而动态改变元素的宽度。但发现获取不到数据,我是这样写的。 解决办法 也可以把样式写成内联的,内部样式和外部样式是获取不到元素的宽度的。但是内联样式写太多样式不美观。

weixin_44106635的博客 502

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

javascript 的 style.width 取不到元素的宽度值

以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。今天想用原生JS想获取一个元素宽度时,写document.getElementById(“id”).style.width或者document.getElementById(“id”).width都取不到值。。。总结了一下。在以下情况下,j

ForMyQianDuan的博客 3303

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

关于 js的 style.width 取不到元素的宽度值

以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。 今天想用原生JS想获取一个元素宽度时,写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。 总结了一下。在以下情...

皓月星辰 2390

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

深入解析JavaScript获取元素宽度的多种方式

准确获取元素宽度是前端开发中的基础但关键的任务。基础场景和提供了最直接的访问方式精确计算可以获取CSS解析后的精确值复杂变换处理CSS变换后的实际渲染尺寸特殊场景:隐藏元素需要临时显示,盒子模型需要特殊处理在实际开发中,选择合适的方法需要考虑性能影响、是否需要实时数据以及具体的布局需求。现代浏览器提供的API为响应式尺寸监听提供了更高效的解决方案,值得在新项目中优先考虑。理解这些方法背后的原理和差异,将帮助开发者编写出更高效、更健壮的前端代码,应对各种复杂的布局挑战。

Joker的博客 1280

js原生.style.width或者.width取不到值

1.元素未设置宽度值。 2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。比如 css代码 p{ background:pink; } html代码 <p id="p1">aaaaaaaaaa</p> PS:虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如:设置p元素宽度为200px: docu...

菜鸟的博客 1630

js怎样获取div元素的宽度

有些时候需要获取到div的宽度 在线编程地址https://www.w3school.com.cn/tiy/t.asp?f=html_basic <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...

4893

关于js的style.width取不到元素的宽度值的问题

方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。虽然这种方式取不到宽度值。但却可以设置元素的宽度值。那么,对于没有设置宽度的元素、亦或CSS样式非内嵌式的,所以,只有将元素的样式设置成内嵌式的,才可以通过。对于设置了CSS样式的元素(内联、内嵌、外联)今天想用原生JS想获取一个元素宽度时,写。原来,在以下情况下,js无法取到。执行后输出结果为144px。

weixin_44797199的博客 598

原生JS取style.width无法取到

以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。 今天想用原生JS想获取一个元素宽度时,写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。 总结了一下。在以下情...

weixin_39092312的博客 702

试谈style.width和offsetWidth对设置对象宽度区别

昨天被人叫过去看一个bug。他的bug有一处是这样的:img.style.width = div.style.width / 2; img.style.height = div.style.width / 2;在跟他说明宽度不能用这种方式来设置要用offsetWidth或者offsetHeight 设置之后他问了我一句 为啥同样都是宽度,为啥不能用这种宽度设置要用那种方式设置呢

novice的博客 1680

html获取div宽度,【JS】获取元素宽度

微信订阅号:rabbit_svip1、常见误区element.style.width通过 element.style.width 这个方法,获取到的是在html元素中内联的宽度。比如:如果是上面这种写法,用 div1.style.width 这种方法就可以获取div1的宽度。但是如果div1的样式都是在里写的,或者是连了别的css文件,用 element.style.xxx 这种写法就获取不到元素...

weixin_36081148的博客 1522

document.getElementById().style.width获取不到宽度

问题: document.getElementById().style.width死活获取不到dom的宽度!! 原因: dom.style.width只能获取到style里面设置的宽度,即便在class里设置了宽度,也获取不到。 解决: document.getElementById().offsetWidth即可正常获取dom的实际宽度。 区分: document.getElementById(...

Beam 7893

基于js中style.width与offsetWidth的区别

作为一个初学者,经常会遇到在获取某一元素的宽度(高度、top值...)时,到底是用 style.width还是offsetWidth的疑惑。1. 当样式写在行内的时候,如 &lt;div id="box" style="width:100px"&gt;时,用 style.width或者offsetWidth都可以获取元素的宽度。但是,当样式写在样式表中时,如 #box{ width: 100px;...

风丶不会停息 733

html代码style图片width,HTML Style width用法及代码示例

HTML DOM中的Style width属性用于设置或返回元素的宽度,该元素可以是block-level元素或具有固定位置的元素。用法:它用于返回width属性:object.style.width它用于设置width属性:object.style.width = "auto|length|%|initial|inherit"属性值说明auto-该值由浏览器自动设置默认宽度值。length-该值...

weixin_39742958的博客 1154
上一篇: Vue中利用swiper实现自动轮播功能
下一篇: Vue 不能检测变动数组的情况
Uncle_long
博客等级 码龄10年 17粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值