В качестве послесловия: стили или классы?

В заключении давайте затронем еще несколько оптимизационных моментов, связанных с отображением HTML-страницы на экране браузера. Пусть в нашем документе есть элементы, у которых нужно поменять цвет, фон или что-нибудь еще, относящееся к стилям. Например, подсветить строки таблицы при наведении мыши или пометить их, если выбрана соответствующая галочка в форме.

Существует два способа это сделать: при помощи стилей или установив цвет (или фон) напрямую из JavaScript. Для начала немного кода — с помощью класса:

var items = getElementsByTagName ('li');

for (var i = 0; i < 1000; i++) {
        items[i].className = 'selected'
}

И с помошью стилей:

var items = el.getElementsByTagName('li');

for (var i = 0; i < 1000; i++) {
        items[i].style.backgroundColor = '#007f00';
        items[i].style.color = '#ff0000';
}

Результаты простые и понятные:

Метод	IE 6	IE 7	Firefox 1.5	Firefox 2.0	Opera 9
element.className	512	187	291	203	47
element.style.color	1709	422	725	547	282

Таблица 6.6. Применение стилей и классов к элементам