Строка стилей style.cssText

Послание № 11

Применение стилей через class

Давайте вспомним, что доступ к атрибутам осуществляется при помощи методов:

· elem.hasAttribute(name) – проверяет наличие атрибута

· elem.getAttribute(name) – получает значение атрибута

· elem.setAttribute(name, value) – устанавливает атрибут

· elem.removeAttribute(name) – удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Используя эти методы, мы легко можем применять различные стили к выбранным элементам. Единственное, что мы должны будем сделать, так это прописать эти стили в CSS заранее.

Например:

.attention { /* Сти­ли для эле­мен­тов, тре­бую­щих вни­ма­ния поль­зо­ва­те­ля */

background-color: yellow; /* Жел­тый фон */

font-weight: bold; /* По­лу­жир­ный шрифт */

border: solid black 2px; /* Чер­ная рам­ка */

}

Идентификатор class в языке JavaScript является зарезервированным словом, поэтому HTML-атрибут class в JavaScript-сценариях доступен в виде свойства с именем className.

Последнее, что нам остается сделать, это добавить атрибут Class для нашего элемента:

element.className = "attention";

У этого способа есть и плюсы и минусы:

К плюсам относится то, что это очень простой и быстро действенный способ изменить стиль у выбранного элемента.

К минусам относится то, что при изменении свойства элемента className, другие стили, которые также могли применятся к нашему элементу, стираются.

Классы в виде объекта: classList

Атрибут class – уникален. Ему соответствует аж целых два свойства!

Работать с классами как со строкой неудобно. Поэтому, кроме className, в современных браузерах есть свойство classList.

Свойство classList – это объект для работы с классами.

Методы classList:

· elem.classList.contains("class") – возвращает true/false, в зависимости от того, есть ли у элемента класс class.

· elem.classList.add/remove("class") – добавляет/удаляет класс class

· elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.

Кроме того, можно перебрать классы через for, так как classList – это псевдо-массив, но нельзя поменять напрямую, например:

element.classList[2] = “newClass”;

Работа со стилями элемента

Самый простой способ управления стилями CSS – это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style. Например, чтобы вывести содержимое элемента e крупным, полужирным шрифтом синего цвета, можно выполнить операции для записи значений в свойства, которые соответствуют свойствам стиля font-size, font-weight и color:

e.style.fontSize = "24pt";

e.style.fontWeight = "bold";

e.style.color = "blue";

При работе со свойствами стиля объекта CSSStyleDeclaration не забывайте, что все значения должны задаваться в виде строк. В таблице стилей или атрибуте style можно написать: position: absolute; background-color: #ffffff; Чтобы сделать то же самое для элемента e в JavaScript, необходимо заключить все значения в кавычки:

e.style.position = "absolute";

e.style.backgroundColor = "#ffffff";

Обратите внимание, что точки с запятыми не входят в строковые значения. Это точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах стилей CSS, не нужны в строковых значениях, устанавливаемых с помощью JavaScript. Кроме того, помните, что во всех свойствах позиционирования должны быть указаны единицы измерения. То есть нельзя устанавливать свойство left вот так:

e.style.left = 300; // Не­пра­виль­но: это чис­ло, а не стро­ка

e.style.left = "300"; // Не­пра­виль­но: от­сут­ст­ву­ют еди­ни­цы из­ме­ре­ния

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

e.style.left = "300px";

Сброс стиля в style

Для того, чтобы сбросить стиль, установленный в атрибуте style, присваивают объекту style пустую строку:

elem.style.width="".

При сбросе свойства style стиль будет взят из CSS.

Например, для того, чтобы спрятать элемент, можно присвоить: elem.style.display = "none". А вот чтобы показать его обратно – не обязательно явно указывать другой display, наподобие elem.style.display = "block". Можно просто снять поставленный стиль: elem.style.display = "".

Строка стилей style.cssText

Свойство style является специальным объектом, ему нельзя присваивать строку.

Запись div.style="color:blue" работать не будет. Но как же, всё-таки, поставить свойство стиля, если хочется задать его строкой?

Можно попробовать использовать атрибут: elem.setAttribute("style",...), но самым правильным и, главное, кросс-браузерным (с учётом старых IE) решением такой задачи будет использование свойства style.cssText.

Свойство style.cssText позволяет поставить стиль целиком в виде строки.

Например:

<div>Button</div>

<script>

var div = document.body.children[0];

div.style.cssText="color: red!important; \

background-color: yellow; \

width: 100px; \

text-align: center; \

blabla: 5; \ ";

alert(div.style.cssText);

</script>

Браузер разбирает строку style.cssText и применяет известные ему свойства. Неизвестные, наподобие blabla, большинство браузеров просто проигнорируют.

Важно!

При установке style.cssText все предыдущие свойства style удаляются.

Свойство style.cssText используют, например, для новосозданных элементов, когда старых стилей точно нет.

Запоминаем!

style.cssText осуществляет полную перезапись style. Если же нужно заменить какое-то конкретно свойство стиля, то обращаются именно к нему: style.color, style.width и т.п, чтобы не затереть что-то важное по ошибке.