В заключении давайте затронем еще несколько оптимизационных моментов, связанных с отображением 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. Применение стилей и классов к элементам