В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.
Управление классом (классами) элемента
Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className
. Данное свойство является отражением атрибута class
в DOM. DOM-свойство className
не было названо class
из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.
Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className
:
<p id="alert">...</p> <script> var elem = document.querySelector('#alert'); // добавим класс к элементу elem.className = 'alert'; // "alert" // изменим класс у элемента elem.className = 'alert-warning'; // "alert-warning" // получим значение класса и сохраним его в className var classElem = elem.className; // "alert-warning" // удалим класс у элемента elem.className = ""; // "" </script>
Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.
Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:
<p id="alert">...</p> <script> var elem = document.querySelector('#alert'); // добавим класс к элементу elem.setAttribute('class', 'alert'); // изменим класс у элемента elem.setAttribute('class', 'alert-warning'); // получим значение класса и сохраним его в className var classElem = elem.getAttribute('class'); // "alert-warning" // удалим класс у элемента elem.removeAttribute('class'); </script>
DOM-свойство className
и атрибут class
всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.
Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.
Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.
Пример, в котором проверим наличие у элемента класса content__show
:
<div id="content" class="content content__show">...</div> <script> var elem = document.querySelector('#content'); if ((' ' + elem.className + ' ').indexOf(' content__show ') > -1) { // у элемента есть класс content__show } else { // у элемента класса content__show нет } </script>
Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList
.
Свойство classList
Свойство classList
представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.
Методы classList
:
.add( className1[,className2,...] )
— добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет..remove( className1[,className2,... ] )
— удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет..contains( className )
– проверяет наличие класса у элемента; в качестве ответа возвращаетtrue
илиfalse
..toggle( className [,flag] )
— переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр (flag
) необязательный. По умолчанию он имеет значениеundefined
. Если ему установить значениеtrue
илиfalse
, то он будет работать как методadd
илиremove
, т.е. либо добавлять класс к элементу, либо удалять его у него.
Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList
:
// получим элемент c id="sidebar" const sideBar = document.querySelector('#sidebar'); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle('hidden-xs'); // добавим три дополнительных класса sideBar.classList.add('col-xs-6', 'col-sm-4', 'col-md-3'); // удалим класс hidden-xs sideBar.classList.remove('hidden-xs'); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains('hidden-lg')) { sideBar.classList.add('hidden-md'); }
Объект classList
является псевдомассивом, т.е. его можно перебрать как массив.
Пример, в котором переберём все классы classList
:
<div class="content col-12 col-sm-8 col-md-6">...</div> <script> var content = document.querySelector('.content'); // Вариант №1. С помощью цикла for // classList.length - количество классов у элемента // отсчёт классов в classList ведётся с 0 for (var i = 0, length = content.classList.length; i < length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList[7]); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); } </script>
Свойство classList
поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.
Стили элемента
В DOM у каждого элемента есть свойство style
, с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.
Пример, как можно к элементу добавить стили через DOM-свойство style
:
<div class="square">Квадрат</div> <script> const square = document.querySelector('.square'); square.style.width = '170px'; square.style.height = '170px'; square.style.backgroundColor = 'green'; </script>
Имена свойств объекта style
обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color
. В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color
для объекта style
будет указывать как backgroundColor
. А, например, CSS-свойство с браузерным префиксом -webkit-border-radius
— как WebkitBorderRadius
.
Удаление стилей
Например, установим body
некоторый цвет фона:
document.body.style.backgroundColor = '#eee';
Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:
document.body.style.backgroundColor = '';
Примеры использования DOM-свойства style для установки стилей элементам.
<p id="introtext" style="font-weigth: bold;">...</p> <p>...</p> <p>...</p> <script> // установим элементу с id = "introtext" с использованием style красный цвет текста document.querySelector('#introtext').style.color = 'red'; // установим всем элементам p на странице с использованием style зелёный цвет текста var paragraphs = document.querySelectorAll("p"); for (var i = 0, length = paragraphs.length; i < length; i++) { paragraphs[i].style.backgroundColor = 'green'; } // выведем в консоль все CSS свойства элемента с идентификатором "introtext" var styleElem = document.querySelector('#introtext').style; for (var i = 0, length = styleElem.length; i < length; i++) { console.log(styleElem[i]); } </script>
Свойство cssText
Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText
. Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style
.
Пример, в котором установим стили "font-size:40px; color:blue;"
элементам с классом intro
:
<p class="intro">...</p> <script> //получим все элементы с классом intro const introList = document.querySelectorAll('.intro'); //установим "font-size:40px; color:blue;" всем элементам в introList for (let i = 0, length = introList.length; iПри установке стилей с помощью свойства
style.cssText
нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибутаstyle
и в соответствующем ему DOM-свойстве.Выполнить операцию, аналогичную той которую выполняет свойство
style.cssText
, можно ещё через методsetAttribute
.Например:
<p class="info">...</p> <script> //получим первый элемент с классом info const info = document.querySelector('.info'); //установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute('style', 'margin: 10px; padding: 10px; border: 1px solid green;'); </script>Задания
1. Написать скрипт, используя
classList
, для установления элементу с классомtext
трех классов:size-40
,color-red
иbg-yellow
:<!-- СSS --> <style> .size-40 { font-size: 40px; } .color-red { color: red; } .bg-yellow { background: yellow; } </style> <!-- HTML --> <p class="text">Некоторый текст...</p>2. Написать код для установления стиля
"width: 180px; height: 180px;"
всем элементам на странице с классом, начинающимся со словblock-
.