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的元素，则只返回第一个。

首先，您需要确保您的图片共享一个公共类，而不是相同的ID，如下所示：

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

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

然后，您可以使用NodeList Array#slice on MDN将querySelectorAll返回的Array#slice转换为正常的图片数组。

完成后，您可以对每个图像（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，将上面的代码放在document ready function中，或者您打算使用当前拥有的按钮，还需要确保代码将被执行。然后将上面的javascript放入您的按钮onclick事件将调用的myFunction函数中。

Answer 2

将您的ID更改为class，因为id对于每个元素都是唯一的。

然后改变课堂上的所有内容，例如

function change(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.width ="100px";
    }
}

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

2 个答案: