Использование 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, то все сведется к определению наличия этого класса у элемента или его родителей.