不能改变< img>的类标签 [英] cannot change class of <img> tag

问题描述

我正在尝试查找页面上的所有标签并将其类别从multiimage更改为mySpace但我在页面上看不到任何更改，当我将此elemets记录到控制台时，我可以看到其中className设置为'multiimage'。

我的代码：

  window.onload = function（）{
 //存储所有< img> elements 
 var arrayOfMultiImages = new Array（）; 
 var multiImageNumber = document.getElementsByClassName（multiimage）。length; 
 // store< img>数组中的标签
 for（var i = 0; i< multiImageNumber; i ++）{
 arrayOfMultiImages.push（document.getElementsByClassName（multiimage）[i]）; 
} 
 //更改< img>的className元素
 for（var x = 0; x< multiImageNumber.length; x ++）{
 arrayOfMultiImages [x] .className =mySpace; 
} 
 //看不到任何变化
 console.log（arrayOfMultiImages）; 
}; 
  

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

解决方案

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'）;  

< pre class =snippet-code-css lang-css prettyprint-override> .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>

这篇关于不能改变&lt; img&gt;的类标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！