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

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

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

 document.getElementById("MyElement").className = "MyClass"; 

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

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

 document.getElementById("MyElement").className  = " MyClass"; 

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

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|s)MyClass(?!S)/g , '' ) /* Code wrapped for readability - above is all one statement */ 

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

 (?:^|s) # Match the start of the string, or any single whitespace character MyClass # The literal text for the classname to remove (?!S) # Negative lookahead to verify the above is the whole classname # Ensures there is no non-space character following # (ie must be end of string or a space) 

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

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

 if ( document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/) ) 

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

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

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

Второй шаг — переместить событие onclick из HTML в JavaScript, например, используя addEventListener.

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

 $('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

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

 $('#MyElement').toggleClass('MyClass'); 
 $('#MyElement').click(changeClass); 

или без идентификатора:

 $(':button:contains(My Button)').click(changeClass); 

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

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

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

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

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

(Обратите внимание, что $ здесь является объектом jQuery.)

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

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

 document.getElementById("MyElement").classList.add('MyClass'); document.getElementById("MyElement").classList.remove('MyClass'); if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass'); 

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

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

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector