Как работать со стилями в JavaScript.
Всем привет! В этой статье мы рассмотрим, как правильно и кроссбраузерно задавать стили в javascript.
Итак, те, кто из вас уже хоть немного знаком с javascript, знают, что у элементов есть свойство style, в котором хранится объект, используя который можно задать те или иные css стили. Однако, здесь не все так просто, как может показаться на первый взгляд. И вот почему. Создадим два самых обычных div блока, но для одного зададим стили через атрибут style, а для другого через тег style.
<style>
div {
width: 150px;
height: 150px;
}
#div1 {
background: #f00;
}
</style>
<div id="div1"></div>
<div id="div2" style="background: #0f0"></div>
Теперь попытаемся вывести значение свойства background для этих блоков.
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
alert(div1.style.background);
alert(div2.style.background);
В первом случае мы ничего не получим, но для блока div2 стили будут выведены. Почему? Все дело в том, что javascript может вывести значения только тех свойств, которые были заданы прямо в html разметке, используя атрибут style, и те, которые были заданы через javascript. Если мы сейчас зададим свойство background таким образом
div1.style.background = "#f00";
То теперь значение будет выведено через alert.
alert(div1.style.background);
Те же стили, что мы задаем в теге style или во внешней таблице стилей, называются "computed styles" или "вычисляемые стили". Название они такое получили неспроста. Дело в том, что браузер сначала считывает html разметку, а затем вычисляет стили, которые мы задаем во внешней таблице стилей, и применяет их к этой разметке.
Тем не менее, получить к ним доступ мы все же можем. В спецификации DOM Level2 для этого есть специальная функция getComputedStyle(). Давайте посмотрим, как она работает.
var styles = getComputedStyle(div1);
alert(styles.background);
Вы должны передать в нее элемент, стили которого хотите получить, и она вернет вам объект. Теперь просто укажите нужное вам свойство, и вы тут же получите его значение.
Однако эта функция не работает со старыми браузерами(IE8-), поэтому, если вы хотите, чтобы ваш код был кроссбраузерным, то используйте приведенный ниже код.
function getStyle(element) {
return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
}
Использование аналогичное
var styles = getStyle(div1);
alert(styles.background);
Итак, сегодня мы узнали, как работать со стилями в javascript и как получать стили кроссбраузерно.
Спасибо за внимание и удачи!
-
Создано 14.07.2015 19:00:00
-
Михаил Русаков
Комментарии (1):
Спасибо . Очень полезная статья
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.