Добавить класс к элементу HTML очень просто, если использовать метод свойства classList в JavaScript, add(). Сначала кратко рассмотрим общую формулу, а затем приведем практический пример.
var element = document.querySelector("selector")
element.classList.add("class")
В общем примере выше мы находим первый HTML-элемент на странице с указанным именем селектора (это может быть селектор элемента, селектор класса и т. д.) и сохраняем ссылку на него в переменной. Затем мы присоединяем метод add() свойства classList к элементу и указываем класс, который мы хотим добавить.
Давайте попробуем найти первый элемент абзаца на этой странице, которую вы сейчас читаете, и присвоим ему класс bg-red.
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")
И результат: Добавление красного цвета фона к первому элементу абзаца с помощью метода add свойства classList JavaScript. Примечание. У меня есть класс bg-red в таблице стилей CSS моего веб-сайта, поэтому он работает. Класс выглядит так:
.bg-red {
background-color: #cf4b32;
}
Вы можете использовать метод добавления classList, чтобы добавить любой пользовательский класс, используя любое свойство CSS, от цветов до размеров шрифта.
Добавьте несколько классов к одному и тому же элементу
Вы можете легко добавить несколько классов к целевому элементу одновременно. Давайте попробуем добавить 3 класса к нашему первому элементу абзаца:
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("text-center", "text-xxl", "italic")
Это сделает первый абзац на этой странице выровненным по центру, придаст ему большой размер шрифта и выделит его курсивом. Попробуйте сами.
