<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как работать со стилями в JavaScript.

Как работать со стилями в 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 и как получать стили кроссбраузерно.

Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

benom benom 16.07.2015 18:51:34

Спасибо . Очень полезная статья

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.