与classList斗争.add和getElementsByClassName

Struggling with classList.add and getElementsByClassName

本文关键字：getElementsByClassName add 斗争 classList 更新时间：2023-09-26

我试图添加一个额外的类与特定类(input-fieldset)的一些元素。

<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

所以我做了一些搜索，发现了这个:

var element = document.getElementsByClassName('input-fieldset');
element.classList.add(' input-fieldset-awesome');

我正在尝试添加类input-fieldset-awesome。

但是它不起作用，我得到错误:

Uncaught TypeError: Cannot read property 'add' of undefined(匿名函数)

我做错了什么?

.getElementsByClassName()返回一个必须迭代的HTMLCollection(对象数组)。

下面的代码将完成您所需要的。

// Get desired elements
var element = document.getElementsByClassName('input-fieldset');
// Iterate through the retrieved elements and add the necessary class names.
for(var i = 0; i < element.length; i++)
{
    element[i].classList.add('input-fieldset-awesome');
    console.log(element[i].className);
}

document.getElementsByClassName返回具有所有给定类名的所有子元素的类数组对象。

在你的情况下，你应该这样修改你的代码:

var element = document.getElementsByClassName('input-fieldset')[0];
element.classList.add(' input-fieldset-awesome');

或

var elements = document.getElementsByClassName('input-fieldset');
for (var i = 0; i<elements.length; i++) {
   elements[i].classList.add('input-fieldset-awesome');
}

getElementsByClassName返回没有classList属性的HTMLCollection，您应该遍历集合。

[].slice.call(document.getElementsByClassName('input-fieldset'))
  .forEach(function(elem) {
      elem.classList.add('cls');
  });

没有找到相关文章