Изменение стилей и классов в JavaScript

Изменение CSS-стилей и классов элементов страницы посредством JavaScript используется в разработке довольно часто. В этой статье мы разберем js-свойства и методы, которые позволяют управлять стилями и классами. Вы узнаете, как добавить, удалить, заменить класс или стиль, а также как работает эффект toggle в JS. В конце статьи мы напишем простое выпадающее меню, используя этот эффект.

Изменение стилей

Одним из способов задать стили элементу является установка стилей через атрибут style тега:

<div style="width:60px;"></div>

Получить, удалить и изменить содержимое атрибута style можно тремя способами:

• с помощью вызова свойств js-свойства style;
• обратившись к свойству cssText js-свойства style;
• вызвав методы getAttribute и setAttribute

Свойство style

Чтобы изменить содержимое атрибута style с помощью js-свойства style, нужно вызвать это свойство у объекта элемента DOM. При вызове style вернет объект CSSStyleDeclaration, который будет содержать CSS-стили атрибута style.

Например, чтобы получить объект со стилями элемента с идентификатором card, напишем следующий код:

const card = document.querySelector('#card');
const cardStyle = card.style;

Таким образом, в созданную переменную cardStyle запишется объект со стилями элемента card.

Объект CSSStyleDeclaration содержит в себе свойства, имена которых идентичны названиям CSS-свойств. Вызывая эти свойства, можно манипулировать значениями стилей.

Допустим, элемент с идентификатором card содержит следующие CSS-стили: width: 40px; height: 60px;". Проведем над этими стилями следующие действия: извлечем значения каждого свойства, а также изменим и удалим эти значения:

const card = document.querySelector('#card');

// Получим ширину и высоту элемента
const cardWidth = card.style.width;
const cardHeight = card.style.height;

// Установим новые значения ширины и высоты
card.style.width = '80px';
card.style.height = '100px';

// Очистим значения, присвоив пустые строки
card.style.width = '';
card.style.height = '';

Стоит отметить, что CSS-свойства, состоящие из нескольких слов, разделяются знаком дефиса, а соответствующие им свойства style.[property] имеют «верблюжью нотацию» (camelCase). Например, если нам необходимо получить значение CSS-свойства margin-left, то это нужно сделать следующим образом:

const card = document.querySelector('#card');
const cardMarginLeft = card.style.marginLeft;

Свойство cssText

Способ style.[property] позволяет работать с отдельными стилями. Управлять несколькими стилями одновременно можно, используя свойство cssText, вызвав его у style:

const card = document.querySelector('#card');

// Получим ширину и высоту
const cardStyles= card.style.cssText;

// Установим новую ширину и высоту, создадим синие границы и зададим их округление
card.style.cssText = 'width: 80px; height: 100px; border: 2px solid blue; border-radius: 7px;';

// Удалим значения
card.style.cssText = '';

Методы getAttribute и setAttribute для управления стилями

Еще одним способом манипулирования стилями является вызов у элемента методов getAttribute и setAttribute. Извлечь строку со стилями можно при помощи getAttribute с передачей в этом метод в качестве параметра строки 'style'. Установка новых значений элементу происходит с помощью вызова метода setAttribute и передачей ему двух параметров: первый — строка 'style', второй — строка с перечнем стилей.

const card = document.querySelector('#card');

// Получим все стили атрибута style элемента card
const cardStyle= card.getAttribute('style');

// Изменим ширину и высоту, добавим черную заливку
card.setAttribute('style', 'width: 80px; height: 100px; background: #000');

// Удалим значения
card.setAttribute('style', '');

Изменение классов

Изменять классы элементов на странице, используя JavaScript, можно следующими способами:

• обратиться к свойству className элемента;
• вызвать методы getAttribute и setAttribute;
• с помощью свойства classList.

Свойство className

Проведем манипуляции с классом элемента, используя className:

// Получение
const barClasses = document.querySelector('#bar').className;

// Установление или замена одного...
document.querySelector('#bar').className = 'active';

// ...или нескольких классов
document.querySelector('#bar').className = 'active touched';

// Удаление всех классов
document.querySelector('#bar').className = '';

Методы getAttribute и setAttribute для управления классами

Чтобы извлечь классы с помощью метода getAttribute, нужно его вызывать у элемента, передав методу в качестве параметра строку 'class'. Для установления классов, используя метод setAttribure, необходимо передать этому методу два параметра: строку 'class' и строку с перечнем названий классов через пробел:

// Извлечение всех классов элемента
const barClasses = document.querySelector('#bar').getAttribute('class');

// Установление или замена
document.querySelector('#bar').setAttribute('class', 'active');
document.querySelector('#bar').setAttribute('class', 'active touched');

// Очистка классов
document.querySelector('#bar').setAttribute('class', '');

Свойство classList

У вышеописанных способов есть недостаток — если у элемента уже есть классы, то при записи новых классов существующие удаляются. Но как добавить или удалить только конкретное число классов?

Это можно выполнить с помощью вызова у элемента страницы свойства classList, которое возвращает объект DOMTokenList. Этот объект содержит специальные методы для работы с классами.

Метод add

Добавлением занимается метод add, принимающий неограниченное число параметров в виде имен устанавливаемых классов:

document.querySelector('#bar').classList.add('active', 'touched');

В этом случае к существующим классам элемента с идентификатором bar добавятся еще active и touched.

Если добавляется класс, который уже существует в элементе, то он просто игнорируется — дублирование не происходит.

Метод remove

Для удаления определенных классов используется метод remove. В него передаются имена классов, которые необходимо удалить:

document.querySelector('#bar').classList.remove('active', 'touched');

Если попытаться удалить класс, которого нет в элементе, то никакой ошибки не будет.

Метод contains

Иногда бывает нужным проверить, существует ли конкретный класс у элемента. Это можно сделать, вызвав метод contains у classList и передав методу имя класса. Метод contains возвращает булевое значение true, если элемент содержит этот класс, и false в случае отсутствия целевого класса.

const bar = document.querySelector('#bar');
if (bar.classList.contains('active')) {
    // если элемент bar содержит класс active, то выполнить эту логику
};

Метод replace

Также classList позволяет легко заменить нужный класс с помощью метода replace. Методу необходимо передавать два параметра:

• имя класса, который заменяем;
• имя класса, на который заменяем.

Метод replace возвращает true в случае успешной замены либо false, если замена не состоялась:

document.querySelector('#bar').classList.replace('active', 'disabled');

Метод toggle

У classList есть метод toggle, который объединяет возможности методов add и remove, добавляя либо удаляя класс, в зависимости от наличия этого класса у элемента. Метод toggle принимает два параметра.

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

В качестве второго опционального значения можно передавать true либо false. Значение true сообщит методу, что он должен добавить класс, передаваемый в первом параметре — то есть метод toggle будет работать подобно методу add. И, соответственно, значение false как второй параметр заставит toggle повторять функционал метода remove — удалять класс.

Так как classList является псевдомассивом, то у каждого класса, содержащегося в classList, есть индекс, по которому к классу можно обращаться.

Изменение стилей и классов с помощью jQuery

В дополнение к способам изменения стилей и классов с помощью нативного JavaScript, рассмотрим альтернативный вариант этих действий — с помощью популярной библиотеки jQuery. Библиотека умеет делать некоторые манипуляции, описанные выше, с использованием меньшего количества кода.

Распишем примеры изменения стилей и классов на jQuery:

// Получить значение конкретного свойства
$('#card').css('width');

// Установить значение
$('#card').css('width', '100px');

// Добавить класс
$('#card').addClass('active');

// Удалить класс
$('#card').removeClass('active');

// Добавить класс, если его нет, или удалить в случае его наличия
$('#card').toggleClass('active');

Пример: выпадающее меню с помощью метода toggle в JS

Изменение классов широко используется в практике для создания анимационных эффектов. Например, эффект toggle в JS часто применяется при создании выпадающего меню. Разработаем простой вариант подобного меню.

Наше меню будет состоять из трех пунктов верхнего уровня. К каждому пункту будет прикреплено подменю из двух пунктов, которые будут выпадать при нажатии на пункт меню верхнего уровня.

HTML:

<nav class='demoDropdownMenu' id='demoDropdownMenu'>
    <ul>
        <li>
            <a href='#'>Меню 1</a>   
            <ul>
                <li>
                    <a href='#'>Подменю 1.1</a>    
                </li>    
                <li>
                    <a href='#'>Подменю 1.2</a>    
                </li>                
            </ul> 
        </li>
        <li>
            <a href='#'>Меню 2</a>   
            <ul>
                <li>
                    <a href='#'>Подменю 2.1</a>    
                </li>    
                <li>
                    <a href='#'>Подменю 2.2</a>    
                </li>                
            </ul>  
        </li>
        <li>
            <a href='#'>Меню 3</a>  
            <ul>
                <li>
                    <a href='#'>Подменю 3.1</a>    
                </li>    
                <li>
                    <a href='#'>Подменю 3.2</a>    
                </li>                
            </ul>   
        </li>                        
    </ul>
</nav>

CSS:

.demoDropdownMenu {
  max-width: 160px;
}

.demoDropdownMenu ul {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.demoDropdownMenu li {
  list-style: none;
  display: block;
}

.demoDropdownMenu a {
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding: 5px 7px;
  color: #fff;
}

.demoDropdownMenu li:not(:last-child) {
  border-bottom: 1px solid #fff;
}

.demoDropdownMenu > ul > li > a {
    background: #007ecf;
}

.demoDropdownMenu > ul > li > a:hover {
    background: #0173bd;
}

.demoDropdownMenu > ul > li > ul {
    height: 0;
}

.demoDropdownMenu > ul > li.show > ul {
    height: 100%;
}

.demoDropdownMenu > ul > li > ul > li > a {
    background: #045c95;
}

.demoDropdownMenu > ul > li > ul > li > a:hover {
    background: #044874;
}

JavaScript:

// Возьмем все элементы пунктов меню первого уровня
const dropdownMenuItems = document.querySelectorAll('#demoDropdownMenu > ul > li');

// Пройдем в цикле по каждому из них
for (let i = 0; i < dropdownMenuItems.length; i++) {
    // Добавим каждому событие нажатия кнопки мыши
    dropdownMenuItems[i].addEventListener('click', function (event) {
        // По нажатию кнопки мыши предотвратим переход по ссылке в href...
        event.preventDefault();
        // ...и добавим/удалим класс, который отобразим/спрячем выпадающее подменю
        this.classList.toggle('show');
    });
}

Демо:

Попробуйте сделать такое же меню с помощью jQuery (метод toggleClass) и отпишитесь в комментариях о результате.