获取存储在DOM中的多个图片的宽度

Get the width of multiple pictures stored in DOM

本文关键字：DOM 获取 存储      更新时间：2023-09-26

嗨，我在获取存储在DOM中的多个图片的宽度时遇到了一个问题。

我的html看起来像：

<div id="showcase" class="showcase">
        <div class="showcase-slide">
            <div class="showcase-content"> 
                <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/1.jpg" alt="02" />
            </div>
        </div>
        <div class="showcase-slide">
            <div class="showcase-content">
                <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/2.jpg" alt="02" />
            </div>
        </div>
        <div class="showcase-slide">
             <div class="showcase-content">
                <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/3.jpg" alt="02" />
            </div>
        </div>
        <div class="showcase-slide">
         <div class="showcase-content">
                <img src="https://asp.zone-secure.net/v2/90/10158/58365/multimedia/1_1/4.jpg" alt="02" />
            </div>
        </div>

我尝试过的：

for(var i=0; i < mineContor; i++){
                    var img = $("img")[i];
                    console.log(img.width); 
                }

规格：mineContor=4(我有多少IMG(；

问题：

240
(3) 0

有时就像上面的控制台，其中240像素的宽度是第一张图片的实际宽度。有时喜欢吼叫。

(4) 0

即使console.log(img.src);使用正确的src路径返回我在DOM中的4个图像！此外，这些图像具有不同的维度。

问题：

为什么是0而不是宽度？

在$(window).load(function(){}); 中编写代码

这是因为它在加载所有其他东西(如图像(时执行。

所以你的代码变成：

$(window).load(function() {
   for(var i=0; i < mineContor; i++){
                    var img = $("img")[i];
                    console.log(img.width); 
                }
});

$("img").each(function(){
console.log($(this).css("width"));
   OR
console.log($(this).width());
});

演示

我不喜欢您的变量mineContor的想法。这似乎不是一个非常灵活的解决方案。我建议一个不使用jQuery或任何外部库的替代解决方案：

// get all images (img) on the page
var images = document.getElementsByTagName('img');
// iterate over the images and return the width for every single image
for (var i = 0; i < images.length; i++) {
    console.log((i + 1) + '. image has width ' + images[i].width + 'px');
}

这比硬编码变量中的图像数量效果更好，也更灵活。

编辑：

上面的代码最初只是作为其他答案的补充，作为没有jQuery和避免对变量mineContor进行硬编码的替代方案。

只有在DOM完全加载之后，才能读取文档中的图像。

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

下面是一个扩展，展示了如何在页面上实现代码示例：

var getImageWidth = function() {
    // declare all variables in the beginning
    var images, i;
    // get all images, it returns an HTMLCollection, an array-like object
    images = document.getElementsByTagName('img');
    // iterate over the images and get the width for every one of them
    console.log((i + 1) + '. image has width ' + images[i].width + 'px');
}
// execute the function after the page has finished loading
// important: no brackets after the function
window.onload = getImageWidth;

根据需要调整函数体，方法是使用console.log重新排列输出，或者返回值(可能是数组(。

试试这个：在$(function()中编写代码，这将确保所有DOM结构都准备就绪。然后迭代所有图像并调用.width()方法，该方法将为您提供每个图像的宽度。

$(function(){
  $('#showcase .showcase-content img').each(function(){
     console.log($(this).width());
  });
});

JSFiddle演示

这是因为只有$("img")[0]返回第一个出现的图像元素的DOM对象，具有width属性。CCD_ 9等不会。[n]不会返回下一个出现的图像，我相信这就是您的想法。此外，如果您想循环浏览每个图像，为什么不在jQuery中使用$.each()方法呢？

$('#showcase img').each(function() {
    console.log($(this).width());
});

这会更好用吗？

$.each($('img'), function(index, value){
   console.log($(value).width()); 
});

https://jsfiddle.net/hz6zvvth/

相关文章：