=> Главная База Знаний Оптимизация сайта Использование computed style


Использование computed style

Использование 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];

};

}();

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

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

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

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