Подтвердить что ты не робот

Добавить класс в элемент

Я пытаюсь написать этот код, чтобы сделать вид сетки через CSS:( jsbin)

   var tables = document.getElementsByClassName('tableData');
    var rows = tables[0].getElementsByTagName('tr');
for(var i=1; i<rows.length; i +=2) {
  alert(rows[i]);
  rows[i].className = "alt";
}

Это работает только с элементами tr, имеющими class="". Но если я хочу добавить класс в tr. Я пробовал Core.addClass, но он не работает.

4b9b3361

ОТВЕТЫ

Ответ 1

Два года спустя (2012/06) появился новый и блестящий подход - element.classList с помощью методов add(), remove(), toggle(), contains().

rows[i].classList.add("alt");

Поддерживается

  • Chrome 8 +
  • Firefox 3.6 +
  • Internet Explorer 10 +
  • Opera 11.50 +
  • Safari 5.1 +

Ответ 2

Попробуйте rows[i].className += " alt";

Ответ 3

Это добавит только имя класса, если оно еще не существует

var classToAdd = 'alt';
if (rows.className.length == 0)
{
  rows.className = classToAdd;
}
else if (rows.className.indexOf(classToAdd) < 0)
{
  rows.className += ' ' + classToAdd;
}

Ответ 4

Возможно, вы захотите использовать фреймворк Javascript. Оказывается, что Firefox и Internet Explorer имеют разные подходы для добавления имен классов.

Для Firefox, я считаю, вам нужно сделать

element.setAttribute('class','<className>');

а в IE вы можете сделать

element.className='<className>';

ИЗМЕНИТЬ

Оказывается, Firefox поддерживает атрибут element.className. Однако Internet Explorer не понимает element.setAttribute('class'...). Вы должны сделать element.setAttribute('className'...), если хотите использовать вызов функции setAttribute.

jQuery предоставляют интерфейс, где вы можете сделать

$(element).addClass('<className>');

и он заботится обо всех неоднозначностях браузера. Также есть removeClass() и hasClass() функции для управления и тестирования атрибутов класса.

Итак, в вашем сценарии вы бы сделали:

var tables = document.getElementsByClassName('tableData');
var rows = tables[0].getElementsByTagName('tr');
for(var i=1; i<rows.length; i +=2) {
    // alert(rows[i]);
    $(rows[i]).addClass("alt");
}

Обратите внимание, что вы можете упростить это с помощью большего количества функций jQuery.