Получаем значения свойств элементов - getComputedStyle
В ходе обработки HTML-страницы браузер вычисляет значения множества свойств для всех элементов и, исходя из этого, отображает их на странице. Научимся получать значения этих свойств.
getComputedStyle
DOM2 обеспечивает возможность взаимодействия с CSS, в том числе и возможность чтения вычисленных СSS-свойств элемента с помощью метода getComputedStyle.
По стандарту, метод getComputedStyle объекта window возвращает объект типа CSSStyleDeclaration, с помощью методов которого можно получить значения интересующих нас свойств. Чтобы предыдущее предложение стало более понятным, рассмотрим пример:
<script type="text/javascript">
window.onload = function() {
// Создаем экземпляр объекта типа CSSStyleDeclaration для ссылки с идентификатором linkId
var cs = window.getComputedStyle(document.getElementById('linkId'), "");
// Получим значение свойства color для ссылки с помощью метода getPropertyValue
alert(cs.getPropertyValue("color"));
}
</script>
Метод getComputedStyle принимает два аргумента: ссылку на элемент и текстовую переменную с указанием псевдо-элемента. В данном примере, в качестве второго аргумента можно было указать ":after" и получить цвет соот-его псевдо-елемента.
currentStyle
И всё бы хорошо, если бы не одно НО!, а оно у нас почти всегда одно — браузер Internet Explorer. Товарищи их Майкрософта всегда плевали на стандарты и спецификации, и этот раз тоже не стал исключением. Вышеприведенный код не будет работать в ИЕ7 и ниже (насчет IE8 — время покажет), т.к. в эксплорере нет реализации метода getComputedStyle. Вместо него у элементов в IE есть свойство currentStyle, которое возвращает объект с хешом имя_свойства=значение_свойства.
Чтобы как-то поправить положение, напишем фикс для IE, добавляющий метод getComputedStyle для объекта window и метод getPropertyValue для объекта, который вернет getComputedStyle:
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
С этим фиксом вышеприведенный код работает кроссбраузерно. Попробуем вывести еще пару свойств:
var cs = window.getComputedStyle(document.getElementById('linkId'), "");
var out = "";
out += "color:" + cs.getPropertyValue("color") + "\n";
out += "float:" + cs.getPropertyValue("float") + "\n";
out += "background-color:" + cs.getPropertyValue("background-color");
alert(out);
}
Камрад Octane очень верно заметил, что currentStyle в IE принимает ключи, записанные верблюжим шрифтом, поэтому необходимо преобразование вида border-color -> borderColor, которое прекрасно работает в нашем IE-фиксе.
Проверено в: IE7, FF2, FF3, Opera 9.5, Safari 3, Chrome 0.2.
© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.