Как заменить класс у элемента js

How to Change an Element’s Class with JavaScript

In this tutorial, you will learn the ways of changing an element’s class with JavaScript.

In JavaScript, the standard way of selecting an element is to use the document.getElementById(«Id») . Of course, it is possible to obtain elements in other ways, as well, and in some circumstances, use this.

For replacing all the existing classes with a single or more classes, you should set the className attribute, as follows:

For adding a class to an element, without affecting/removing existing values, you should append a space and a new classname, like here:

For removing a single class to an element, without affecting other potential classes, a regular expression replace is needed, like here:

The explanation of this regular expression is the following:

The flag g commands the replacement to repeat as required if the class name has been added several times.

The regex that is used above can also be applied for checking whether a specific class exists.

While it is possible to directly write JavaScript in the HTML event attributes, (for instance, onclick=»this.className+=’ My_Class'» ), you are not welcomed to act so. Particularly on larger applications, a more sustainable code is reached by separating HTML markup from the JavaScript interaction logic.

The first step to reach this is creating a function and calling it in the onclick attribute, like here:

The second step is moving the onclick event out of HTML and into JavaScript by using addEventListener , as follows:

You can also change classes by using jQuery, as follows:

Additionally, jQuery can provide a shortcut for adding a class, in case it doesn’t apply, either removing a class, which does it, like here:

Also, you have the option of assigning a function to a click event using jQuery, as follows:

or, without needing an id:

Describing the Regular Expressions

Regular expressions (RegExp) are patterns that are applied for matching character combinations in strings . They are also considered objects in JavaScript. They are used along with the exec and test methods of RegExp , as well as with the replace, match, search and split methods of String.

The regular expressions obtain four optional flags that might be used either independently or together in any sequence and are included as part of the regular expression.

.class List

Динамически читаем, добавляем и удаляем классы у элементов.

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. classList.add()
   2. classList.remove()
   3. classList.replace()
   4. classList.toggle()
   5. classList.contains()
   6. Имена классов
   1. Егор Огарков советует

   Обновлено 9 января 2023

   Кратко

   Скопировать ссылку на секцию «Кратко» Скопировано

   Свойство class List даёт возможность просматривать и манипулировать классами элемента.

   Пример

   Скопировать ссылку на секцию «Пример» Скопировано

   Как понять

   Скопировать ссылку на секцию «Как понять» Скопировано

   Управлять классами элемента — одна из распространённых задач, потому браузеры предоставляют встроенные средства для решения такой задачи. В свойстве class List элемента содержится специальный объект, который хранит информацию о текущих классах элемента и содержит методы для работы с ними.

   Как пишется

   Скопировать ссылку на секцию «Как пишется» Скопировано

   У class List есть множество методов, но мы рассмотрим только часто используемые.

   class List . add ( )

   Скопировать ссылку на секцию «classList.add()» Скопировано

   Этот метод используется для добавления класса к элементу. В качестве аргументов нужно передавать строку с именем класса.

   Добавим элементу класс animate :

   Можно так же передать несколько строк-аргументов, тогда добавится несколько классов:

   Можно не бояться, что один и тот же класс добавится два раза. Если вызвать метод add ( ) и передать уже существующий класс, то он не добавится второй раз.

   class List . remove ( )

   Скопировать ссылку на секцию «classList.remove()» Скопировано

   Метод используется для удаления класса у элемента. В качестве аргумента нужно передавать строку с именем класса.

   Предположим, что кнопке назначен единственный класс submit :

   В remove ( ) можно передать несколько аргументов и удалится несколько классов

   Предположим что в HTML есть элемент <div class = «banner hidden animated»> . . . < / div> :

   class List . replace ( )

   Скопировать ссылку на секцию «classList.replace()» Скопировано

   Метод позволяет заменить одно значение класса другим. Метод принимает 2 параметра:

   • название класса, который нужно заменить;
   • название класса, на что нужно заменить.

   После выполнения replace ( ) возвращает boolean-значение, которые сообщает нам об успешности операции:

   • true если класс был заменён;
   • false если ничего не изменилось.

   class List . toggle ( )

   Скопировать ссылку на секцию «classList.toggle()» Скопировано

   Метод можно использовать, чтобы включать или выключать класс. Если при вызове toggle ( ) переданный класс уже есть на элементе, то он будет убран. Если класса не было — то добавлен.

   Метод toggle ( ) принимает только один класс для переключения. Опционально вторым аргументом можно передать boolean-значение: метод будет работать как add ( ) , если передать true , и как remove ( ) , если передать false .

   class List . contains ( )

   Скопировать ссылку на секцию «classList.contains()» Скопировано

   Метод позволяет проверить наличие класса у элемента. Метод принимает один параметр — строку с названием класса, наличие которого нужно проверить.

   Метод contains ( ) вернёт true если класс есть и false если класса нет.

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

   Скопировать ссылку на секцию «Имена классов» Скопировано

   Классом не может быть строка содержащая пробелы. При попытке передать в аргументах такую строку, будет выброшена ошибка. Это правило касается любого метода в class List .

   На практике

   Скопировать ссылку на секцию «На практике» Скопировано

   Егор Огарков советует

   Скопировать ссылку на секцию «Егор Огарков советует» Скопировано

   �� Свойство class List является псевдомассивом, поэтому разработчик может обращаться к классам по индексам, как в массиве. При этом новые классы добавляются в конец, а при удалении все классы (и соответственно их индексы) смещаются. При этом class List легко превращается в обычный массив, по которому можно итерироваться любым привычным способом.

   �� Вместо использования class List можно попробовать пользоваться свойством class Name . Это поле содержит строку с именами всех классов через пробел.

   Предположим у нас есть элемент шапки:

   В поле class Name будет находиться точно такая же строка, что и в атрибуте элемента class (даже если в ней будут лишние пробелы).

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

   Однако если с классами приходится работать часто или нужно сделать что-то сложнее, чем просто переопределить класс, то удобнее использовать методы из class List .

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

   Селектор по классу

   Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.

   Изменить class для элемента с помощью JavaScript/jQuery

   Современный HTML5 сильно улучшается и тем самым дает больше возможностей для JavaScript. В этой записи я покажу как можно изменять, добавить или удалить класс (class) для элементов с помощью JavaScript или jQuery.

   HTML для демо

   Допустим у нас есть такой элемент, у которого есть три класса «test1», «test2» и «hello-world» и id «myel».

   Это пример будет использоваться для JavaScript и jQuery решений ниже.

   JavaScript решение

   Современные браузеры добавили новые способы управления классами для элементов, например classList.

   Ниже предоставлен пример его работы с официального сайта MDN:

   Современное HTML решение используя classList

   Для начала нам нужно найти сам элемент с помощью document.getElementById() и далее использовать метод classList . Выглядит это все следующим образом:

   В целом весь код выше в комментариях и вам должно понять. Но вот еще небольшое разъяснение:

   • add() — добавляет новый класс
   • remove() — удаляет указанный класс
   • contains() — проверяет существование класса
   • toggle() — ставит и удаляет класс, этот метод можно использовать для например нажатия на кнопку, чтобы у элемента ставился и убирался класс

   Если лишь одно НО: Internet Explorer до 10 версии не поддерживают метод classList. Если для вас это важно, то лучше воспользоваться другими способами, которые я буду описывать ниже в этом посте. Но не забывайте, что веб очень быстро улучшается и уже есть первые попытки IE к поддержке этого метода, но лучше пока что не рисковать.

   100% рабочий способ, поддерживаемый всеми браузерами (кроссбраузерный)

   Выглядит он вот так:

   Мы используем className для манипуляции классами элемента «myel». Есть лишь один минус этого способа — он заменит все текущие классы элемента на «wow».

   Самое важное в этом способе — это его кроссбраузерность.

   Если ваша задача состоит в том, чтобы изменить класс(-ы) для одного-двух элементов на странице, то лучше использоваться JavaScript, и забыть про jQuery, потому что вы лишь добавите весь странице и она станет медленнее грузиться.

   jQuery

   В jQuery все упрощенно до невозможности и работает кроссбраузерно.

   Например, чтобы добавить класс «test7», нужно воспользоваться методом addClass():

   Чтобы удалить его, нужно использовать removeClass():

   Если вы хотите заменить все классы на один единственный, то нужно использовать метод attr():

   И теперь у «myel» будет только два класса, «test3» и «test4».

   Изменить класс элемента с помощью JavaScript/jQuery

   В этом посте мы обсудим, как изменить класс элемента с помощью JavaScript и jQuery.

   1. Замените класс другим классом

   Чтобы заменить класс другим классом, вы можете удалить старый класс с помощью jQuery. .removeClass() метод, а затем добавьте новый класс, используя jQuery .addClass() метод.

   jQuery

   В простом JavaScript вы можете использовать Element.classList.remove() а также Element.classList.add() методы для удаления и добавления класса соответственно.

   2. Замените все классы одним или несколькими новыми классами.

   Чтобы заменить все существующие классы одним или несколькими новыми классами, вы можете просто заменить содержимое class атрибут с новыми классами. Вот пример в jQuery, демонстрирующий это с помощью .attr() метод.

   jQuery

   В простом JavaScript мы можем сделать это с помощью className атрибут.

   3. Переключить класс

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

   Это все об изменении класса элемента с помощью JavaScript и jQuery.

   Оценить этот пост

   Средний рейтинг 5 /5. Подсчет голосов: 21

   Голосов пока нет! Будьте первым, кто оценит этот пост.

   Сожалеем, что этот пост не оказался для вас полезным!

   Расскажите, как мы можем улучшить этот пост?

   Спасибо за чтение.

   Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

   Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования ��

   Читать:

   Какой язык программирования используется в excel