Как добавить класс элементу javascript

Как добавить класс к заданному элементу в JavaScript

Если вы хотите добавить класс к элементу HTML, не заменяя его существующий класс, вы можете сделать, как показано в следующем примере:

     .content < padding: 20px; border: 2px solid #ccc; >.highlight  
This is a paragraph of text.
 Add Class 
   

В приведенном выше примере функция addNewClass() добавляет нового класс highlight к элементу DIV, у которого уже есть класс box , без его удаления или замены с помощью свойства className .

Кроме того, вы также можете использовать свойство classList для добавления / удаления классов у элемента, например:

Important piece of information!
  

Свойство classList поддерживается во всех современных браузерах. Не поддерживается в IE до версии 10.

Читайте также

Похожие примеры:

• Как получить элемент по имени класса в JavaScript
• Как динамически добавлять CSS-свойства к элементу с помощью jQuery
• Как добавить атрибуты к элементу HTML в jQuery

Добавление класса к элементу с помощью JavaScript

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

 
Привет, мир!
 
 

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

Использование свойства className

Один из наиболее простых способов — использовать свойство className . Оно представляет собой строку, содержащую все классы элемента, разделенные пробелами. Чтобы добавить новый класс, достаточно взять текущее значение className , добавить пробел и новое имя класса:

var element = document.querySelector('.oldClass'); element.className += ' newClass';

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

Использование метода classList.add

Более современный и предпочтительный способ — использовать свойство classList , которое представляет собой список всех классов элемента, и метод add этого списка:

var element = document.querySelector('.oldClass'); element.classList.add('newClass');

Этот метод автоматически проверяет наличие класса перед добавлением, поэтому дубликатов не будет. Кроме того, classList предоставляет и другие полезные методы, такие как remove (удаление класса), toggle (добавление класса, если его нет, и удаление, если он есть) и contains (проверка на наличие класса).

Важно помнить, что classList не поддерживается в Internet Explorer 9 и более ранних версиях. Если поддержка этих браузеров требуется, следует использовать className или подключить полифилл для classList .

Итак, добавление класса к элементу в JavaScript — это простая и часто используемая операция, которую можно выполнить несколькими способами. Выбор метода зависит от конкретной задачи и требований к поддержке браузеров.

Как сделать — Добавить имя класса

Узнать, как добавить имя класса к элементу с помощью JavaScript.

Нажмите кнопку, чтобы добавить класс ко мне!

Добавить класс

Шаг 1) Добавить HTML:

Добавить имя класса для элемента div с (в этом примере мы используем кнопку для добавления класса).

Пример

Шаг 2) Добавить CSS:

Стиль указанного имени класса:

Пример

.mystyle <
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
>

Шаг 3) Добавить JavaScript:

Получите элемент с и добавьте к нему класс «mystyle»:

Пример

function myFunction() <
var element = document.getElementById(«myDIV»);
element.classList.add(«mystyle»);
>

Кросс-браузерное решение

Примечание: Свойство classList не поддерживается в Internet Explorer 9. Следующий код будет работать во всех браузерах:

Пример

function myFunction() <
var element, name, arr;
element = document.getElementById(«myDIV»);
name = «mystyle»;
arr = element.className.split(» «);
if (arr.indexOf(name) == -1) <
element.className += » » + name;
>
>

Совет: Также смотреть Как переключить класс.

Совет: Также смотреть Как удалить класс.

Совет: Узнать больше о свойстве в нашем classList JavaScript Справочнике.

Совет: Узнать больше о свойстве в нашем className JavaScript Справочнике.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Element.className

Свойство className отвечает за значение атрибута class элемента.

Примечание: Кстати, у className есть большой брат. Его зовут element.classList — более мощный и функциональный метод для работы с классами элемента.

Синтаксис

var cName = elem.className; elem.className = cName;

• cName — строка. Если нужно указать несколько классов, они указываются через пробел.

Пример

var elm = document.querySelector("div"); alert(elm.className); //"booble example" elm.className = "class1 class2 class3"; alert(elm.className); //"class1 class2 class3" 

Примечание: ##### Примечание:Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным*.*

Поддержка браузерами

BCD tables only load in the browser

Спецификация

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.