Как заменить класс у элемента js
Перейти к содержимому

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

Как изменять атрибуты, классы и стили в DOM

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

Обзор выбора элементов

Библиотека jQuery упростила процесс выбора одного или нескольких элементов и применения изменений ко всем одновременно.

Напомним, что document.querySelector() и document.getElementById() — это методы, которые используются для доступа к одному элементу. Используя div с атрибутом id, мы можем получить доступ к этому элементу.

Метод querySelector() является более надежным. Он позволяет выбрать элемент на странице с помощью любого типа селектора.

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

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

Мы будем использовать метод querySelectorAll() для захвата всех элементов с классом demo-class. А также forEach() для их перебора и изменения.

Также к определенному элементу можно получить доступ с помощью querySelectorAll():

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

Примечание: Методы getElementsByClassName() и getElementsByTagName() возвращают наборы элементов HTML, не имеющие доступа к методу forEach(). Он использует querySelectorAll(). В этих случаях необходимо применять стандартный цикл for для перебора набора.

Атрибуты — это значения, которые содержат дополнительную информацию об HTML-элементах. Чаще всего они состоят из пары имя / значение и могут применяться в зависимости от элемента. Полный список HTML- атрибутов смотрите в списке атрибутов .

К пользовательским элементам, которые не являются частью стандарта HTML, добавляется префикс data-.

В JavaScript доступно четыре метода изменения атрибутов элемента:

Метод Описание Пример
hasAttribute() Возвращает логическое значение true или false element.hasAttribute(‘href’);
getAttribute() Возвращает значение указанного атрибута или null element.getAttribute(‘href’);
setAttribute() Добавляет или обновляет значение указанного атрибута element.setAttribute(‘href’, ‘index.html’);
removeAttribute() Удаляет атрибут из элемента element.removeAttribute(‘href’);

Создадим новый HTML-файл с тегом <img>, использующим один атрибут. В нем мы будем ссылаться на изображение, доступное через URL-адрес.

При загрузке созданной веб-страницы в браузере ее HTML-код будет выглядеть следующим образом:

Обзор выбора элементов

Теперь протестируем все методы для обработки атрибутов.

Удалим атрибут src и значение, связанные с тегом <img>. Но можно сбросить этот атрибут и назначить ему другое изображение с помощью img.setAttribute():

Обзор выбора элементов - 2

Также можно изменить атрибут напрямую, присвоив ему новое значение в качестве свойства элемента:

Любой атрибут может быть отредактирован так же, как и с помощью описанных выше методов.

Методы hasAttribute() и getAttribute() используются с условными операторами. Методы setAttribute() и removeAttribute() также применяются для изменения структуры DOM.

Атрибут class соответствует селектору класса CSS . CSS-классы используются для применения стилей к нескольким элементам. В отличие от идентификаторов, которые могут существовать на веб-странице только в единственном экземпляре.

В JavaScript есть свойства className и classList , предназначенные для работы с атрибутом class.

Метод / Свойство Описание Пример
className Получает или задает значение класса element.className;
classList.add() Добавляет одно или несколько значений класса element.classList.add(‘active’);
classList.toggle() Включает или отключает класс element.classList.toggle(‘active’);
classList.contains() Проверяет, существует ли класс. element.classList.contains(‘active’);
classList.replace() Заменяет существующее значение класса новым. element.classList.replace(‘old’, ‘new’);
classList.remove() Удаляет значение класса. element.classList.remove(‘active’);

Создадим еще один HTML-файл для демонстрации перечисленных выше методов.

После открытия файла classes.html в браузере вы увидите следующее:

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

Мы присвоили первому элементу div класс warning, определенный в CSS. Вы получите следующий результат:

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

Другой способ изменить классы – использовать свойство classList , которое включает в себя несколько полезных методов. Они похожи на JQuery-методы addClass, removeClass и toggleClass.

После выполнения указанных выше методов веб-страница будет выглядеть следующим образом:

Использование classList.add() добавит новый класс в список существующих. Также можно использовать setAttribute для изменения класса элемента.

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

Создадим простой пример для демонстрации изменения стилей элементов с помощью JavaScript. Ниже приведен новый HTML-файл. Он включает в себя div с несколькими встроенными стилями, применяемыми для отображения квадрата.

При открытии файла styles.html в браузере вы увидите следующее:

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

Один из вариантов редактирования стилей – использование метода setAttribute().

Но подобный подход удалит все существующие для элемента встроенные стили. Поэтому лучше напрямую использовать атрибут style:

Обратите внимание, что в методах JavaScript используется другие правила написания свойств CSS. Например, вместо text-align мы будем использовать textAlign.

После этого окончательный результат будет выглядеть следующим образом:

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

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

Заключение

В этом руководстве мы рассказали, как получить доступ, изменить и удалить атрибуты HTML-элементов в DOM с помощью JavaScript. А также как добавлять и заменять CSS-классы элемента, редактировать встроенные CSS- стили. Для получения дополнительной информации ознакомьтесь с документацией по атрибутам от Mozilla Developer Network.

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, дизлайки, подписки огромное вам спасибо!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!

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

Как я могу изменить класс HTML-элемента в ответ на onClick событие с использованием JavaScript?

25 ответов

современные методы HTML5 для изменения классов

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

к сожалению, они не работают в Internet Explorer до v10, хотя есть сим чтобы добавить поддержку для него в IE8 и IE9, доступные из на этой странице. Это, однако, становится все больше и больше поддерживает.

простое кросс-браузерное решение

стандартный способ JavaScript для выбора элемента использует document.getElementById(«Id») , что используется в следующих примерах — вы, конечно, можете получить элементы другими способами, и в правильной ситуации можете просто использовать this вместо этого-однако, вдаваясь в детали, это выходит за рамки ответа.

чтобы изменить все классы для элемента:

заменить все существующие классы с одним или несколькими новыми классами задайте атрибут className:

(вы можете использовать пробел, чтобы применить несколько классов.)

добавить дополнительный класс к элементу:

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

чтобы удалить класс из элемента:

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

объяснение этого выражения выглядит следующим образом:

на g флаг сообщает replace повторить, как требуется, в случае, если имя класса было добавлено несколько раз.

чтобы проверить, если класс уже применяется к элементу:

то же регулярное выражение, используемое выше для удаления класса, также может использоваться в качестве проверки того, является ли определенный класс существует:

назначение этих действий событиям onclick:

в то время как можно писать JavaScript непосредственно внутри атрибутов событий HTML (например, onclick=»this.className+=’ MyClass'» ) это не рекомендуется поведение. Особенно в больших приложениях более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

первым шагом к достижению этого является создание функции и вызов функция в атрибуте onclick, например:

(не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и включение JavaScript в отдельный файл может быть более уместным.)

второй шаг-переместить событие onclick из HTML в JavaScript, например, с помощью addEventListener

(обратите внимание, что окно.выполнение части требуется, чтобы содержимое этой функции выполняются после HTML закончил загрузку-без этого MyElement может не существовать при вызове кода JavaScript, поэтому эта строка завершится ошибкой.)

JavaScript-фреймворки и библиотеки

вышеуказанный код все в стандартном JavaScript, однако общепринятой практикой является использование фреймворка или библиотеки для упрощения общих задач, а также выгоды от фиксированного ошибки и крайние случаи, о которых вы можете не думать при написании кода.

хотя некоторые люди считают излишним добавлять фреймворк

50 КБ для простого изменения класса, если вы делаете какой-либо значительный объем работы JavaScript или что-либо, что может иметь необычное поведение в кросс-браузере, это стоит рассмотреть.

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

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

(обратите внимание, что $ вот объект jQuery.)

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

кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

Изменить 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».

Добавить комментарий

Ваш адрес email не будет опубликован.