javascript - 使用javascript更改具有相同ID的多个图像的宽度

Question

我有一个包含多个具有相同 id 图像的页面，我想使用 javascript 根据它们的原始大小来调整每个图像的大小。它似乎只检查图像的第一个实例而不是其他实例，有什么方法可以让它在所有图像上工作吗？

<img id="myImg" src="compman.gif" width="100" height="98">
<img id="myImg" src="compman.gif" width="49" height="98">

<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

<script>

<script>
var x = document.getElementById("myImg").width;
var yourImg = document.getElementById('myImg');
if(x < 50) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}
</script>

Answer 1

这不起作用的原因是 getElementById 旨在查找并返回具有该唯一元素 ID 的单个元素。如果您有两个具有相同 ID 的元素，则只返回第一个。

因此，首先您需要确保您的图像共享一个公共(public)类，而不是相同的 Id，如下所示:

<img class="myImg" src="compman.gif" width="100" height="98">
<img class="myImg" src="compman.gif" width="49" height="98">

然后，您应该使用 document.querySelectorAll() 而不是使用 document.getElementById，它将返回与选择器匹配的所有元素(作为 NodeList)。 document.querySelectorAll on MDN

然后您可以使用Array#slice Array#slice on MDN 将querySelectorAll 返回的NodeList 转换为普通的图像数组。 .

完成后，您可以遍历每个图像 ( Array#forEach ) 并根据需要设置它们的宽度/高度

因此，这是您需要做的可能的解决方案，并附有评论:

var images = document.querySelectorAll('.myImg'), // Fetch all images wih the 'myImg' class
    imageArray = Array.prototype.slice.call(images); // Use Array.prototype.slice.call to convert the NodeList to an array

imageArray.forEach(function (img) { // Now itterate over each image in the array
   if (img.width < 50) { // If the width is less than 50
       img.style.setAttribute('height', '100px'); // Set the height and width
       img.style.setAttribute('width', '200px');
   }  
});

您还需要确保代码将被执行，如果您使用的是 jQuery，请将上面的代码放在 文档就绪函数 中，或者如果您要使用按钮你目前有。然后将上面的 javascript 放入您的按钮 onclick 事件将调用的 myFunction 函数中。