offersetWidth获取imgwidth失败总结

最新推荐文章于 2022-05-18 16:53:02 发布

weixin_45055647

最新推荐文章于 2022-05-18 16:53:02 发布

阅读量903

点赞数

分类专栏：知识点积累文章标签： img属性获取

本文链接：https://blog.csdn.net/weixin_45055647/article/details/90145662

版权

在设置元素样式时遇到JavaScript获取img元素offsetWidth为0的问题。初次加载网页时，图片宽度无法正确获取，但刷新后能正常。分析原因是HTML加载顺序导致。解决方案包括：给img指定width属性、利用图片默认大小或考虑图片加载状态和缓存优化。

摘要由CSDN通过智能技术生成

offsetWidth获取元素width属性失败

问题描述

问题描述

设置元素样式的时候需要通过子元素的宽度来设置父元素的宽度，然后想到了offerset属性，但是当我使用offersetWidth的时候，发现一个奇怪的现象，当网页加载的时候第一次获取到的图片的宽度为0，只有当我对网页重新刷新之后才能够正确的获取元素的宽度。

原文代码

 <li><img src="img/01.jpg" height="350" alt="" /></li>
 <script>
 console.log(document.getElementsByTagName('img'<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45055647

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

缓存一致性协议-MESI

m0_38017860的博客

02-17

2944

背景带有高速缓存的CPU执行计算的流程程序以及数据被加载到主内存指令和数据被加载到CPU的高速缓存CPU执行指令，把结果写到高速缓存高速缓存中的数据写回主内存高速缓存的数据结构高速缓存的底层数据结构其实是一个拉链散列表的结构，就是有很多的bucket，每个bucket挂了很多的cache entry，每个 cache entry 由三个部分组成：tag 、 cache line 、 flagcache line ：缓存的数据，可以包含多个变量的值tag ：指向了这个缓存数据在主内存的数据的地址flag ：标

前端必须要掌握的HTML和CSS面试题

xiaohui-c的博客

06-19

254

初级前端必知必会的HTML和CSS知识点

参与评论您还未登录，请先登录后发表或查看评论

clientWidth offsetWidth innerWidth 区别(窗口尺寸汇总）

孤云博客

03-14

5374

js获取图片信息（二）-----js获取img的height、width宽高值为0

weixin_30414155的博客

07-27

386

首先，创建一个图片对象： var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息： console.log(oImg); console.log(oImg.src); console.log(oImg.height); console.log(oImg.naturalHeight); c...

前端学习（914）：offerset和style区别

歌谣的博客

04-21

828

JS获取文件大小方法小结

10-23

console.error("读取文件失败"); }; } // 使用 document.querySelector('input[type=file]').addEventListener('change', function(e) { var file = e.target.files[0]; if (file) { getFileSize(file); } })...

JS获取IMG图片高宽的简单实例

10-22

总结来说，获取图片尺寸的方法有多种，最简单的当属通过style属性获取，但它仅限于style直接定义的宽度和高度。offsetWidth和offsetHeight、clientWidth和clientHeight以及getComputedStyle()和currentStyle提供了...

jquery实现在页面加载完毕后获取图片高度或宽度

10-25

在Web开发过程中，常常需要在页面加载完毕后对图片进行操作，比如获取图片的高度和宽度，以便于进行布局调整。JQuery为我们提供了许多方便的API来实现这一需求。本文将详细探讨使用JQuery在页面加载完毕后获取图片...

微信小程序wx.getImageInfo()如何获取图片信息

08-28

知识点六：总结微信小程序wx.getImageInfo()是一个非常有用的API，能够帮助开发者获取图片的信息。通过本文，我们学习了如何使用wx.getImageInfo()获取图片信息，并提供了两个实例代码，分别是加载时获取图片信息...

比较 width 与 offsetwidth 的区别

秋天未成熟的博客

04-01

3758

比较width 与 offsetWidth 的区别 1、offsetWidth > width element.offsetWidth = element.style.width + element.style.padding + element.style.border；（不包括margin） 2、offsetWidth 属性仅仅可读，而style.width 是可写的；所以...

offsetwidth详解_offsetWidth和它的兄弟姐妹们

热门推荐

weixin_39905500的博客

12-01

2万+

我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上...

原生js操作html熟悉，css样式等方法

ddwddw4的博客

03-15

993

1. obj.style：这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的属性。而特殊的offersetWidth,offersetHeight是可以获取到定义在<style type="text/css">里面的宽高属性 <style type=”te...

前端学习（913）：offerWidth和offerHeight

歌谣的博客

04-21

624

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...

控制IMG图片的大小缩放

weixin_33924312的博客

02-16

907

法一：img 标签是没有 onload 事件的.所以 UBB 代码中的img用到的onload来处理大的图片进行自适应,这样的办法就不能采取了.但是经过测试,body还是可以带onload事件的, 所以我解决的办法就是在页面全部加载完后再处理太大的图片.于是用JS写了一段简单的代码相关代码function ReImgSize(){for (j=0;j<document.images.leng...

css基础---使用offsetWidth和offsetHeight获取元素的尺寸

wenmin1987的博客

06-08

4913

获取元素的尺寸（display显示情况和display：none两种情况来获取） offsetWidth表示元素在页面中所占用的总宽度 offsetHeight表示元素在页面中所占用的总高度 <div style="width:200px;height:50%;"> <div style="width:50%height:50%;;"> ...

放大镜效果

angry_rooster的博客

08-05

1218

放大镜效果这里的放大镜效果是指当鼠标（手指）和页面（屏幕）中一个方框内的图片交互时，图片呈现放大效果，图片在框内显示的放大区域随鼠标（页面）位置的改变而改变演示链接：https://codesandbox.io/s/fangdajingxiaoguo-jxdfo 源码：https://gitee.com/thisismyaddress/webpage-effects/tree/master/magnifier-effect 以下我尝试了几种不同的实现方式移动图片框内的图片这里是通过改变图片框内的一

div.offersetLeft 和 div.left的区别

weixin_34310785的博客

11-17

621

2019独角兽企业重金招聘Python工程师标准>>> ...

JS获取img图片的原始尺寸高度和宽度

彭世瑜的博客

05-18

2万+

目录方式一：obj.style.width方式二：width/height方式三：offsetWidth/clientWidth方法四： getComputedStyle和 currentStyle方式五：Image对象方法六：naturalWidth方式七：兼容写法方式一：obj.style.width 通过img对象的style属性获取，如果没有设置style，将返回空 <img class="image" style="width: 100px; height: 200px;

Cannot read properties of undefined (reading 'offsetWidth') at VueComponent.imgWidth