与classList.add和getElementsByClassName苦苦挣扎

我想添加一个额外的类到一些特定类（input-fieldset）的元素。与classList.add和getElementsByClassName苦苦挣扎

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

我想添加的类别输入字段集，真棒。

但它不工作，我得到的错误：

Uncaught TypeError: Cannot read property 'add' of undefined(anonymous function)

我在做什么错？

来源

2014-06-14 aproskam

你得到从'getElementsByClassName'元件的阵列，试着只指定一个特定的元素 –

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

这是a working fiddle to play with。

来源

2014-06-14 12:10:19

['classList']（https://developer.mozilla.org/en -US/docs/Web/API/Element.classList），（[compatibility]（http://caniuse.com/classlist））。 –

Classlist是一个清洁工。更好和相对较新的方法来添加类元素。它不涉及操纵'className'字符串 –

感谢你们的领导。我修改了我的代码以反映您的意见。 –

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

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

来源

2014-06-14 12:10:31 undefined

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

来源

2014-06-14 12:12:00 neformal

与classList.add和getElementsByClassName苦苦挣扎

回答

相关问题