CSS cвойства элемента. Использование в JavaScript

Для манипуляции свойствами элемента в JavaScript есть несколько свойств. К ним относятся:

• style
• style.cssText
• className
• classList

Для получения css-свойств из внешней таблицы стилей - метод window.getComputedStyle().

Познакомимся с ними на примерах.

Свойство style элемента

Самое старое и самое, пожалуй, известное - свойство style. Записывается следующим образом:

Обратите внимание, что свойства, состоящие из 2-х слов и пишущиеся в css-стилях через дефис, в JS записываются слитно, без всяких черточек или нижних подчеркиваний, причем второе слово начинается с заглавной буквы.  Это так называемый "Camel Case", или "горбатый синтаксис", позволяющий визуально отделить друг от друга слова в многосложных конструкциях. Например, css-свойство background-color превратилось в backgroundColor, font-size - в fontSize, а одиночное свойство color так и осталось в виде color. Если бы мы использовали такое свойство, как list-style-type, то должны были бы написать  listStyleType.

Исключением является свойство float:

Дело в том, что слово float является зарезервированным в стандарте языка JavaScript, поэтому его использование в стилевых свойствах невозможно.

В случае использования свойства style мы добавляем inline-форматирование для элемента, к которому обращаемся в JavaScript. Т.е. с точки зрения инспектора свойств те стили, которые были записаны в скрипте будут применены к элементу в виде атрибута style. Это видно из инспектора свойств в браузере.

Напомню, что такие свойства имеют приоритет перед теми, которые заданы в css-файле. И в этом есть как свои плюсы, так и свои минусы.

Чтобы сбросить поставленный стиль, присваивают в style пустую строку: 

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

• Lorem ipsum dolor sit amet.
• Et a quos sed ex.
• Veniam, incidunt repellat ullam minus!
• Quam non incidunt nemo consectetur.
• Voluptatibus velit omnis, adipisci. Nobis!

Важно: писать код на javascript, который манипулирует свойствами html-элементов нужно ПОСЛЕ того, как они встретятся на странице, иначе у вас будет ошибка в скрипте, т.к. искомый элемент просто не будет найден. Проще всего располагать теги <script> в самом низу  html-документа перед закрывающимся тегом </body>.

Для того чтобы разобраться с тем, что делает такой метод, как document.querySelector(), стоит прочитать статью Выбор элементов html-страницы с помощью JavaScript.

Свойство style.cssText элемента

Предположим, мы не хотим прописывать в виде нескольких строк целый ряд css-свойств для элемента, тем более, что в итоге они все будут друг за другом перечислены в атрибуте style (см. рисунок выше из Инспектора свойств). Но в свойство style элемента в JavaScript нельзя присвоить строку, состоящую из нескольких свойств. для этого можно использовать свойство style.cssText, которое записывается так:

Это удобней, чем записывать каждое свойство на отдельной строке.
В примере ниже строка css-свойств используется для изменения вида абзаца при клике на нем. Код можно посмотреть во вкладке JS.

See the Pen JS style and className property by Elen (@ambassador) on CodePen.

Свойство className

Свойство className предполагает, что вы имеете таблицу стилей, связанную с вашим html-файлом с некоторым количеством классов в ней (стандартная ситуация, не так ли?).  Как правило, класс предполагает наличие не 1-2 стилевых свойств, а 4, 5 и более. В плане применения всех свойств форматирование назначение класса намного удобнее и с точки зрения использования JavaScript, и с точки зрения подключения css.

Назначить класс для элемента можно, используя свойство className (использовать в JS слово class нельзя, т.к. оно является зарезервированным - аналогично float).

Чтобы удалить класс, достаточно в это свойство записать пустую строку.

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

И. Демьянов
• Под самым карнизом,
• Над самым оконцем
• Забралось в сосульки
• Весеннее солнце.
• Сверкая, бегут по сосулькам слезинки…
• И тают сосульки – веселые льдинки.

На рисунке видно, что при клике на строке добавляется атрибут class="higtlight", а при повторном клике атрибут class="", т.е. имеет пустое значение, как и прописано в js-коде. Чтобы совсем удалить атрибут class или style, необходимо воспользоваться методом removeAttribute():

Здесь мы удаляем атрибут class, а не className, т.к. это строка, а не название свойства.

Т. Дмитриев
• Тюки-тюки, тюки-так –
• Звон веселый слышен.
• Звон веселый слышен.
• Завела под крышей...

Таким же образом можно удалять атрибут style:

Свойство classList

Свойство classList возвращает список классов элемента. В нем можно использовать 4 метода:

• add – добавление класса;
• remove – удаление класса;
• toggle – переключение класса;
• replace – замена одного класса на другой;
• contains – проверка наличия класса у элемента.

Ссылка на описание свойства classList.

Изменение классов методами classList.add() и classList.remove()

Попробуем использовать 3 из 4-х методов свойства classList: contains() для проверки, а назначен ли класс у элемента, add() - для добавления класса, если он не назначен и remove() - для удаления класса при повторном клике.
В примере ниже при клике на любом абзаце добавляется класс "pink". При повторном клике этот класс удаляется.

Переключение классов методом classList.toggle()

Например, нужно сделать простейший переключатель видимых - невидимых элементов с помощью классов. Используем здесь переключатель классов - метод toggle() для того, чтобы добавить к основному классу знак минус с помощью класса "minus" и показать блок абзацев в классе "hide".

See the Pen classList Property by Elen (@ambassador) on CodePen.

В примере с абзацами можно было бы сократить код, просто использовав метод classList.toggle():

Еще один пример от Nikolay Talanov покажет, как можно манипулировать классами для создания красивого блока  для вашего сайта.

See the Pen Cool Layout with Complex Chainable Animation by Nikolay Talanov (@j_holtslander) on CodePen.

Пример переключения темы  страницы со светлой на темную с помощью elem.classList.replace():

See the Pen Light / Dark Mode by Mostafa Fotouhi (@mostafa-fotouhi) on CodePen.

Метод window.getComputedStyle()

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

Используйте для получения стилевых свойств метод window.getComputedStyle(). Он возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Причем получить свойства можно как для самого элемента, так и для псевдоэлемента, указав его в качестве второго параметра.

Обратите внимание, что нужно еще использовать метод getPropertyValue('свойство') для того, чтобы получить значение конкретного свойства.

В JavaScript вы можете использовать значения свойств из внешних таблиц стилей, но не переназначать их в них. Например, мы получим значение свойства top для абсолютно спозиционированного элемента, а затем будем смещать его вниз с помощью функции setInterval():

Нажмите на кнопку, чтобы запустить скрипт.

Вы можете посмотреть на использование этого метода в статье "Видимость элемента в JavaScript. Свойство display: none и block"