且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

不能改变< img>的类标签

更新时间:2022-10-19 13:43:28

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



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



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

  var arrayOfMultiImages = document .getElementsByClassName( '多重图象'); 
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;身高:100px;宽度:100px;}。mySpace {background:green;身高:100px;宽度:100px;保证金:5px;}

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


I'm trying to find all tags on the page and change their class from 'multiimage' to 'mySpace' but i cannot see any changes on the page and when I log this elemets into console I can see ther className set as 'multiimage'.

My code:

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);
};

Don't you have any idea what is wrong there?

multiImageNumber variable is already a number, following line of code doesn't have any kind of sense: for(var x = 0; x < multiImageNumber.length; x++){

Another case - document.getElementsByClassName() returns an array-like object, containing all elements with specified class. There's no need to iterate over it and push every single element into a new array.

If you want to change an array-like object into an array, use Array#from. It's a build-in function, coming from ES6.

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

Once you have changed your array-like object into an array, you can use e.g. Array#forEach function to simply and quickly iterate over it's elements.

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


Simple example:

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>