與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苦苦掙扎

回答

相關問題