Современные методы 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, хотя существует shim для добавления поддержки для 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 указывает замене повторяться при необходимости, если имя класса было добавлено несколько раз.
Чтобы проверить, применяется ли класс к элементу:
То же регулярное выражение, которое использовалось выше для удаления класса, также можно использовать для проверки существования определенного класса:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Назначение этих действий событиям клика:
Хотя можно писать 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');
Назначение функции событию щелчка с помощью jQuery:
$('#MyElement').click(changeClass);
или без идентификатора:
$(':button:contains(My Button)').click(changeClass);