JS获取图片高度的值为0问题

最新推荐文章于 2024-07-04 14:25:38 发布
转载 最新推荐文章于 2024-07-04 14:25:38 发布 · 2.6k 阅读 · 0
文章标签：

#img #获取属性

很有可能是因为图片还未加载完毕，可以调整获取图片属性的位置。

Image 对象的属性

属性描述
align设置或返回与内联内容的对齐方式。
alt设置或返回无法显示图像时的替代文本。
border设置或返回图像周围的边框。
complete返回浏览器是否已完成对图像的加载。
height设置或返回图像的高度。
hspace设置或返回图像左侧和右侧的空白。
id设置或返回图像的 id。
isMap返回图像是否是服务器端的图像映射。
longDesc设置或返回指向包含图像描述的文档的 URL。
lowsrc设置或返回指向图像的低分辨率版本的 URL。
name设置或返回图像的名称。
src设置或返回图像的 URL。
useMap设置或返回客户端图像映射的 usemap 属性的值。
vspace设置或返回图像的顶部和底部的空白。
width设置或返回图像的宽度。

 

可查看官方文档：http://www.w3school.com.cn/jsref/prop_img_width.asp

JS获取图片高度宽度的方法分享
10-24
在介绍方法之前，先了解下为什么直接获取图片高度宽度不成功。正常情况下，当图片加载完成时，浏览器会触发`onload`事件，通知开发者图片已成功加载。但在不兼容的浏览器如Chrome和IE中，会遇到一些问题。Chrome中...
js判断图片加载完成后获取图片实际宽高的方法
10-22
在Web开发过程中，获取...以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点，我们可以在Web开发中更加灵活和准确地处理图片尺寸相关的问题，从而改善用户的视觉体验和页面的适应性。
为什么js获取图片高度的值 都为0
12-02 373
尼玛 这个问题困扰我好久~ 看别人取值都是 img.width 我取到的总是0； 终于发现取图片尺寸的时候 图片还没有加载完毕。所以在 <img id ='sImg' class='thumbImage' onload='alert(this.width);' src='' /> 在onload 里之后取值就对了。想对图片进行大小控制 就写在 onload 里去...
用js能得到图片的高度和长度
borderj的专栏
06-30 232
&lt;html&gt;&lt;body&gt;&lt;p&gt;图片：&lt;br/&gt;&lt;script language="javascript" type="text/javascript"&gt; var imgwidth; var imgheight; var imgObj = new Image(); imgObj.src = "d:\photo_temp.g
JS 获取图片宽高
高先生的猫
12-20 960
一般用于审核后台，比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。 js获取图片宽高 获取 naturalWidth（callback 版本） 方案为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同？ naturalWidth 标识图片的原始宽高。 width 因为历史问题，标识的其实是 DOM 元素宽高。 因为 img 标签会被图片撑开，所以 在不设置 width 属性时，width == natural...
js获取图片真实高度和宽度
qq_59562332的博客
07-04 808
小程序下获取网络图片信息需先配置download域名白名单才能生效。：后端处理，调用接口获取图片高度和宽度。
javascript 获取图片尺寸及放大图片
10-26
在JavaScript中，我们可以直接访问图片元素的`width`和`height`属性来获取图片的当前尺寸。例如： ```html (this)"> function getWH(imgElement) { console.log("width=" + imgElement.width); console.log(...
JavaScript获取图片的原始尺寸以宽度为例
10-25
总之，获取图片的原始尺寸，尤其是在JavaScript中，需要考虑到CSS属性的影响以及浏览器的兼容性问题。通过使用`naturalWidth`和`naturalHeight`属性，以及在旧版IE中利用`Image`对象和`onload`事件，可以确保在各种...
js 获取网络图片的高度和宽度的实现方法(变通了下)
10-29
3. 然后，可以通过JavaScript获取DIV的宽度(clientWidth)和高度(clientHeight)，这两个属性分别代表了DIV元素的内部宽度和高度，由于DIV的尺寸是根据背景图片的尺寸自适应的，因此这些尺寸值实际上就是图片的宽度和...
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;
js获取图片宽高方法
QZ9420的博客
03-28 3905
需要先new 一个Image，并将原来图片的src赋值给new出来的image的src，并在图片的onload方法中获取
js获取图片原始宽高、获取图片的原始尺寸
林中明月间丶
07-04 785
提示：适用于Firefox/IE9/Safari/Chrome/Opera浏览器。原始宽高、不是缩放后的。
获取页面 img标签的高度 （直接获取，我怎么打印出来是零呢）
业余前端的职业经历
09-22 1261
今天发现了一个有趣的现象，我拿到后端回来的数据之后 要操作 页面中的图片的时候 获取 img 标签 给我高度打印出来个 零 <div class="imgList"> <img src="./imgs/banner_1.png" alt="picture" class="lazy"> <img src="./imgs/banner_2.png" alt="picture" class="lazy"> <img src=
js获取图片信息（二）-----js获取img的height、width宽高值为0
weixin_30414155的博客
07-27 432
首先，创建一个图片对象： var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息： console.log(oImg); console.log(oImg.src); console.log(oImg.height); console.log(oImg.naturalHeight); c...
chrome浏览器获取图片的宽高为0
雨夜星辰03--的博客
08-02 785
类似如下的图片,display:none;    1.在火狐浏览器中获取高度和宽的是可以获取到的width 和 height 试了多种网上的方法都没用 例如下面这种网上的方法,根本没用 var img = new Image; img.onload = function(){ alert ( img.width ); }; img.sr...
JS中使用offsetHeight 获取元素高度为0问题
m0_50981596的博客
10-08 3352
JS中使用offsetHeight 获取元素高度为0问题
JS:关于JQ获取图片高度为0的问题记录
MRblackLu的博客
04-08 4600
好久没有写PC的页面，今天写了一把，然后被一个小问题纠结了好久：JQ获取图片高度为0。 不多说，上代码：<style> #box > img { margin-bottom: 20px; width: 100%; } </style><div id="box"> <img src="xxx" /> <img src="xxx" />
微信小程序中图片高度为0的问题
xiaosheng
09-05 3059
话说多说，直接上问题。 在微信小程序中，有时候图片加载出来高度是0，但是也有宽度，控制台的wxml中图片也有，最后才知道要给page加个高度，可是当page高度添加上去之后，无论page的值写多少图片大小都不变，找了半天才发现是在app.wxss中已经给全局定义了image的高度，把app.wxss中关于image的给删掉之后，图片就可以正常显示，此时不用加page也可以显示...
js div有高度 但根据id获取div高度为0怎么办，应该怎么获取div高度
最新发布
06-05
<think>我们面对的问题是：在JavaScript中获取div的实际高度时遇到高度为0的情况，需要解决方案。根据引用内容，我们可以知道：1.获取元素高度的方法有：offsetHeight,clientHeight,scrollHeight等。2.在某些情况下，可能因为元素尚未被渲染（比如元素是动态生成的，或者包含图片等异步加载的内容）而导致获取高度为0。3.引用[3]提到使用MutationObserver来监听元素的变化，然后在回调函数中获取高度，这可以解决动态内容导致的高度获取问题。解决方案：1.确保DOM元素已经渲染完成。如果是在Vue等框架中，可能需要在生命周期钩子（如mounted）中获取。2.如果元素的内容是动态加载的（如图片、异步数据），则需要在内容加载完成后再获取高度。3.使用MutationObserver来监听DOM变化，当变化停止后再获取高度。4.如果元素是隐藏的（display:none），那么它的高度为0。此时可以临时显示元素再获取高度，或者使用其他技巧（如先将其脱离文档流使其可见但不显示）。根据引用[4]，获取浏览器宽度有多种方式，同样高度也可以类似获取。但这里我们关注的是特定元素的高度。具体步骤：方案一：使用clientHeightletheight=document.getElementById('yourDivId').clientHeight;注意：clientHeight包括内边距(padding)，但不包括边框(border)、外边距(margin)和滚动条。方案二：使用offsetHeightletheight=document.getElementById('yourDivId').offsetHeight;offsetHeight包括元素的padding、border和水平滚动条（如果存在）的高度。但是，如果此时元素内容还未加载完成（如图片未加载），那么获取的高度可能不正确。方案三：等待内容加载完成对于图片，可以监听其onload事件；对于其他异步内容，可以使用Promise等。例如，引用[3]中处理图片加载的方式：constsources=contentRef.current.querySelectorAll("[src]");sources.onload=()=>{...}方案四：使用MutationObserver监听DOM变化当元素内容动态变化时，可以监听其子节点、属性等变化，然后在变化回调中获取高度。参考引用[3]的实现，但是注意，它是在React环境中，我们可以在纯JavaScript中实现类似逻辑。方案五：使用setTimeout延迟获取如果无法确定内容加载的时机，可以简单使用setTimeout延迟获取，但这种方式不可靠，通常不是最佳实践。方案六：如果元素是隐藏的，那么可以临时将其设置为可见（但可能闪烁），获取高度后再隐藏。或者将元素脱离文档流（position:absolute），使其可见但又不影响布局，然后获取高度。代码示例：1.基本方法：constelement=document.getElementById('yourDivId');constheight=element.offsetHeight;//或clientHeight2.等待图片加载（如果有图片）：constimages=element.querySelectorAll('img');letcount=images.length;if(count===0){console.log(element.offsetHeight);}else{images.forEach(img=>{img.onload=()=>{count--;if(count===0){console.log(element.offsetHeight);}};//如果图片已经加载完成，则不会触发onload，需要判断complete属性if(img.complete){count--;if(count===0){console.log(element.offsetHeight);}}});}3.使用MutationObserver：constobserver=newMutationObserver(()=>{//当元素变化时，获取高度constheight=element.offsetHeight;//如果变化频繁，可以设置一个延时，避免频繁获取console.log(height);});observer.observe(element,{childList:true,//子节点的变动subtree:true,//包括所有后代节点attributes:true,//属性的变动characterData:true//节点内容或节点文本的变动});//在适当的时机停止观察：observer.disconnect();4.如果元素隐藏导致高度为0：//方法：临时显示元素，获取高度，然后恢复隐藏（注意这会引发闪烁，可能影响体验，谨慎使用）constelement=document.getElementById('yourDivId');constoriginalDisplay=element.style.display;element.style.display='block';//由于浏览器渲染是异步的，我们可能需要使用requestAnimationFrame等待一帧requestAnimationFrame(()=>{constheight=element.offsetHeight;console.log(height);element.style.display=originalDisplay;});但是，上述隐藏元素的方法可能会引起页面闪烁，所以更好的做法是使用不隐藏元素的方法：-将元素的位置设置为绝对定位，并使其在屏幕外，然后获取高度：element.style.position='absolute';element.style.left='-9999px';element.style.visibility='hidden';//然后获取高度constheight=element.offsetHeight;//之后恢复原来的位置和可见性（可以保存原始值）element.style.position='';element.style.left='';element.style.visibility='';5.在Vue等框架中，可以使用nextTick（Vue）或类似的方法确保DOM更新后再获取。总结：正确获取DOM元素的高度，需要根据具体情况选择方法。常见的原因和解决方法是：-元素尚未被渲染：等待DOM渲染完成（如Vue的mounted，或使用setTimeout但不可靠）。-元素内容异步加载：监听内容的加载事件（如图片的onload）。-元素高度本身是动态变化的：使用MutationObserver。-元素被隐藏：临时显示元素或将其脱离文档流获取高度。下面给出一个综合的解决方案（假设元素id为'target'）：*/functiongetActualHeight(id){constelement=document.getElementById(id);if(!element){console.error('Elementnotfound');return0;}//如果元素当前隐藏，采用临时显示的方法（这里使用脱离文档流的方法）constoriginalStyles={position:element.style.position,left:element.style.left,visibility:element.style.visibility,display:element.style.display};//临时改变样式使元素在不显示的情况下可计算高度element.style.position='absolute';element.style.left='-9999px';element.style.visibility='hidden';element.style.display='block';//确保display不是none//立即获取高度（因为此时元素虽然不可见，但浏览器会计算其布局）//但注意：如果元素包含图片等异步内容，此时获取的高度可能还是0，所以需要结合图片加载等letheight=element.offsetHeight;//恢复原始样式element.style.position=originalStyles.position;element.style.left=originalStyles.left;element.style.visibility=originalStyles.visibility;element.style.display=originalStyles.display;//如果高度为0，可能是异步内容的原因，那么我们需要等待内容加载if(height===0){//检查是否有图片constimages=element.querySelectorAll('img');if(images.length>0){returnnewPromise((resolve)=>{letcount=images.length;constloadHandler=()=>{count--;if(count===0){//所有图片加载完成，再次尝试获取高度（此时需要再次临时设置样式？）//注意：这里我们为了避免复杂的样式操作，建议在图片加载后再次调用此函数//但是这样会导致递归，所以我们单独处理图片加载的情况//实际上，如果元素是隐藏的，那么图片加载后我们仍然无法获取，所以需要重新设置样式？//为了简单，我们只获取一次，如果异步加载内容需要重新计算，建议使用MutationObserver//这里我们重新调用一次，但要注意避免无限循环，所以我们设置一个标记constnewHeight=getActualHeight(id);resolve(newHeight);}};images.forEach(img=>{if(img.complete){count--;if(count===0){loadHandler();}}else{img.addEventListener('load',loadHandler);}});});}}returnheight;}//但是以上函数有异步的情况，因此可能返回Promise或者数值。使用起来不方便。//更通用的做法是使用MutationObserver和图片加载事件结合起来，并返回Promise。//由于实现复杂，实际开发中可以考虑使用现成的库（如`imagesLoaded`）来处理。//推荐：使用现成的库imagesLoaded，结合MutationObserver实现。//结论：根据实际情况选择合适的方法。如果没有图片等异步资源，且确保元素已渲染，则直接使用offsetHeight即可。//最后，在框架（如Vue）中，通常可以结合生命周期钩子和nextTick来确保DOM更新后获取：//例如在Vue中：//mounted(){//this.$nextTick(()=>{//letheight=this.$refs.myElement.offsetHeight;//});//}//如果内容动态变化，可以在数据更新后调用：//this.$nextTick(()=>{//letheight=this.$refs.myElement.offsetHeight;//});//对于React，可以使用useEffect结合ref，并在依赖更新后获取。//如果问题仍然存在，则考虑使用MutationObserver或ResizeObserver（现代浏览器支持）。//现代解决方案：ResizeObserver//可以监听元素大小的变化，包括由内容变化引起的高度变化。//示例：//constresizeObserver=newResizeObserver(entries=>{//for(letentryofentries){//constheight=entry.contentRect.height;////使用高度//}//});//resizeObserver.observe(element);//注意：ResizeObserver不会在元素隐藏时触发（此时高度为0），但可以在元素显示后再次触发。//因此，解决高度为0的问题，首先需要确保元素已经显示，内容已经加载，然后使用正确的方法获取。//综上所述，针对你的问题，建议先检查元素是否被正确渲染且可见，再检查是否有异步内容，再决定使用哪种方法。//生成的相关问题：§§相关问题§§1.如何使用ResizeObserver来监听元素尺寸的变化？2.JavaScript中如何判断图片是否加载完成？3.在Vue中如何确保在DOM更新后获取元素高度？4.隐藏元素（display:none）时如何准确获取其实际高度？</think> ### JavaScript获取DOM元素实际高度的解决方案 在JavaScript中获取DOM元素高度为0时，通常是因为**元素未渲染完成、内容动态加载或浏览器渲染机制**导致。以下是综合引用信息和实践经验的解决方案： --- #### 核心解决方案 1. **等待DOM渲染完成**（推荐） ```javascript // 监听窗口加载完成事件 window.addEventListener('DOMContentLoaded', () => { const element = document.getElementById('yourDivId'); console.log('高度:', element.offsetHeight); }); ``` 2. **检测内容异步加载**（如图片/动态数据） ```javascript const element = document.getElementById('yourDivId'); const observer = new MutationObserver(() => { if (element.offsetHeight > 0) { console.log('实际高度:', element.offsetHeight); observer.disconnect(); } }); observer.observe(element, { childList: true, subtree: true }); ``` --- #### 关键方法对比 | **属性/方法** | 说明 | 适用场景 | |----------------------|----------------------------------------------------------------------|------------------------------| | `element.offsetHeight` | 包含元素边框+内边距+滚动条的高度 | 实际可见高度[^2] | | `element.clientHeight` | 包含内边距但不包含边框和滚动条的高度 | 内容区域高度[^4] | | `element.scrollHeight` | 包含隐藏内容的完整高度 | 有滚动内容的元素 | | `getComputedStyle()` | 获取计算后的样式属性值（如 `getComputedStyle(element).height`） | CSS明确设置高度时[^1] | --- #### 特殊场景处理 1. **元素隐藏时获取高度**（display:none） ```javascript // 临时显示元素获取高度 element.style.display = 'block'; element.style.visibility = 'hidden'; const height = element.offsetHeight; element.style.display = 'none'; element.style.visibility = 'visible'; ``` 2. **框架中的解决方案**（Vue/React） ```javascript // Vue示例（引用[3]） useEffect(() => { const height = contentRef.current.clientHeight; setHeight(height); }, [contentRef]); ``` 3. **响应式尺寸获取** ```javascript // 结合窗口大小监听（引用[4]） window.addEventListener('resize', () => { const height = document.getElementById('yourDivId').clientHeight; }); ``` --- #### 常见问题排查 1. **时机问题**：确保DOM完全渲染后再获取（建议使用 `DOMContentLoaded` 或框架生命周期钩子） 2. **内容依赖**：图片/字体等资源加载完成后再测量（监听 `load` 事件） 3. **CSS影响**：检查 `box-sizing` 是否改变高度计算逻辑 4. **布局状态**：避免在 `display: none` 的元素上直接获取高度 > 提示：对于现代浏览器，可优先使用 **[ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)** 实时监听尺寸变化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值