5318

Использование Computed Style

Что же показало тестирование? По меньшей мере, некорректно сравнивать универсальный (offsetHeight) и частный (style.display) случаи. Тестирование показало, что за универсальность надо платить. Если же все-таки хочется универсальности, то можно предложить другой подход: определение Computed Style — конечного стиля элемента (после всех CSS-преобразований).

getStyle = function()

{

var view = document.defaultView;

if(view && view.getComputedStyle)

return function getStyle(el,property)

{

return view.getComputedStyle(el,null)[property] ||

el.style[property];

};

return function getStyle(el,property)

{

return el.currentStyle && el.currentStyle[property] ||

el.style[property];

};

}();

Проведем тестирование этого способа и сведем все результаты в таблицу.

IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

offsetHeight

23500

4453

4453

5140

style.display

171

56

56

34

getStyle

5219

5318

Таблица 6.4. Резульаты выполнения функции getStyle. Времена приведены в миллисекундах

Во-первых, для IE и Firefox (наиболее популярных браузеров) функция эта работает некорректно (в общем случае возвращает неверные данные). Во-вторых, работает она чуть ли не медленнее, чем offsetHeight.

Вообще говоря, рекомендуется не пользоваться такими универсальными функциями (getStyle есть практически в каждой JavaScript-библиотеке), а реализовывать необходимую функциональность в каждом конкретном случае. Ведь если мы договоримся, что скрытые элементы должны иметь класс hide, то все сведется к определению наличия этого класса у элемента или его родителей.