Современные методы 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вместо этого - однако, вдаваясь в подробности, это выходит за рамки ответа.
Чтобы изменить все классы для элемента:
Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут 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
# (i.e. must be end of string or a space)
gФлаг указует заменить на повторение по мере необходимости, в случае , если имя класса было добавлено несколько раз.
Чтобы проверить, применяется ли класс к элементу:
Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Назначение этих действий событиям onclick:
Хотя возможно написать JavaScript непосредственно внутри атрибутов события HTML (например, onclick="this.className+=' MyClass'"), это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.
Первый шаг к достижению этого - создание функции и вызов функции в атрибуте onclick, например:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(Не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и более подходящим может быть включение JavaScript в отдельный файл.)
Второй шаг - переместить событие onclick из HTML в JavaScript, например, используя addEventListener.
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после завершения загрузки HTML - без этого MyElement может не существовать при вызове кода JavaScript, так что строка не будет работать.)
Фреймворки и библиотеки JavaScript
Приведенный выше код написан на стандартном JavaScript, однако обычной практикой является использование инфраструктуры или библиотеки для упрощения общих задач, а также для исправления ошибок и крайних случаев, о которых вы могли не подумать при написании кода.
Хотя некоторые люди считают излишним добавлять среду ~ 50 КБ для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.
(Грубо говоря, библиотека - это набор инструментов, предназначенных для конкретной задачи, в то время как среда обычно содержит несколько библиотек и выполняет полный набор обязанностей.)
Приведенные выше примеры были воспроизведены ниже с использованием jQuery , вероятно, наиболее часто используемой библиотеки JavaScript (хотя есть и другие, заслуживающие изучения).
(Обратите внимание, что $здесь находится объект jQuery.)
Изменение классов с помощью jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:
$('#MyElement').toggleClass('MyClass');
Назначение функции событию click с помощью jQuery:
$('#MyElement').click(changeClass);
или без идентификатора:
$(':button:contains(My Button)').click(changeClass);