2014-06-14 6 views
0

특정 클래스 (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)

내가 잘못 뭐하는 거지 :

는하지만이 작동하지 않습니다, 나는 오류가?

+1

만 특정 요소를 타겟팅하려고 –

답변

5

.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입니다.

+1

['classList' (https://developer.mozilla.org/en -US/docs/Web/API/Element.classList), ([호환성] (http://caniuse.com/classlist)). –

+2

클래스 목록은 클리너입니다. 클래스에 요소를 추가하는 더 좋고 상대적으로 새로운 방법. 'className' 문자열을 조작하는 것을 포함하지 않습니다. –

+0

머리를 주셔서 감사합니다. 귀하의 의견을 반영하도록 코드를 수정했습니다. –

1

getElementsByClassNameclassList 속성이없는 HTMLCollection을 반환하므로 컬렉션을 반복해야합니다.

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

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` '의 요소의 배열을 얻고