Question

我试图找到页面上的所有标签，并从“多图像”中更改他们的课程。到了mySpace＆＃39;但是我在页面上看不到任何变化，当我将这个元素记录到控制台时，我可以看到将className设置为＆＃39; multiimage＆＃39;。

我的代码：

window.onload = function(){
    // to store all <img> elements
    var arrayOfMultiImages = new Array();
    var multiImageNumber = document.getElementsByClassName("multiimage").length;
    // store <img> tag in array
    for(var i = 0; i < multiImageNumber; i++){
        arrayOfMultiImages.push(document.getElementsByClassName("multiimage")[i]);
    }
    // change className of <img> elements
    for(var x = 0; x < multiImageNumber.length; x++){
        arrayOfMultiImages[x].className = "mySpace";
    }
    // cannot see any changes
    console.log(arrayOfMultiImages);
};

你不知道那里出了什么问题吗？

Answer 1

multiImageNumber变量已经是数字，以下代码行没有任何意义： for(var x = 0; x < multiImageNumber.length; x++){

另一种情况 - document.getElementsByClassName()返回一个类似数组的对象，包含具有指定类的所有元素。 不需要迭代它并将每个元素推送到一个新数组中。

如果要将类似数组的对象更改为数组，请使用Array#from。它是一个内置函数，来自 ES6 。

var arrayOfMultiImages = document.getElementsByClassName('multiimage');
var array = Array.from(arrayOfMultiImages);

一旦您已将类似数组的对象更改为数组，您可以使用例如Array#forEach可以简单快速地迭代它的元素。

array.forEach(elem => elem.className = "mySpace")

简单示例：

let elems = document.getElementsByClassName('box');
Array.from(elems).forEach(v => v.className = 'mySpace');

.box {
  background: blue;
  height: 100px;
  width: 100px;
}

.mySpace {
  background: green;
  height: 100px;
  width: 100px;
  margin: 5px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 2

您可以通过循环getElementsByClassName()返回的集合来简化此代码，然后从该循环更改className。

＆＃13;

var multiImageNumber = document.getElementsByClassName("multiimage");
for (var x = 0; x < multiImageNumber.length; x++) {
  multiImageNumber[x].className = "mySpace";
}

＆＃13;

.mySpace {
  border: 1px solid red;
}

＆＃13;

<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="foo">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="multiimage">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="bar">

＆＃13;

无法更改<img/>标记的类

2 个答案:

简单示例：