<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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

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

Ответить

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