Изменить атрибут на теги определенного класса?

Question

У меня есть этот код:

<div class="changingClass"></div>
<div class="someClass"></div>
<div class="changingClass"></div>

Для div, у которых есть класс «changeClass», я хочу добавить атрибут:

<div class="changingClass" myAttr="added attribute"></div>

Как я могу сделать это с помощью JavaScript?

Answer 1

С помощью jQuery ...

$('.changingClass').attr('myAttr', 'added attribute');

Answer 2

На вас должно работать следующее:

var elems = document.getElementsByClassName('changingClass');
for (i=0;i<elems.length;i++){
    elems[i].setAttribute('data-myAttr') = 'addedAttribute';
}

Обратите внимание, что при этом будут найдены, а затем итерированы все элементы с className для параметра changeClass, а затем добавлен атрибут data-myAttr и установлено значение addedAttribute. Я использую data-myAttr для соответствия определенным пользователем атрибутам data- html5 (которые должны позволять странице иметь действительную структуру DOM).

Я изменил приведенный выше код, чтобы он был немного более совместимым (Chromium 14, Opera 11.50 и Firefox 7, все в Ubuntu 11.04):

var elems = document.getElementsByClassName('changingClass'), myAttr;

for (i=0;i<elems.length;i++){
    myAttr = document.createAttribute('data-myAttr');
    myAttr.nodeValue = 'addedAttribute';
    elems[i].setAttributeNode(myAttr);

}

Демонстрация JS Fiddle , обратите внимание, что CSS в этой демонстрации работает только в Firefox и Opera, не Chromium.

Answer 3

var divs = document.getElementsByClassName( "changingClass" );
for ( var i = 0; i < divs.length; i++ ) {
    divs[i].setAttribute( "myAttr", "added attribute" );
    // Another option: divs[i].myAttr = "added attribute";
}

Вы можете использовать метод setAttribute.Селектор getElementsByClassName поддерживается не во всех браузерах - IE.Вы можете сделать свой собственный селектор className или использовать фреймворк, например jQuery , если вы хотите полную поддержку браузера.