Современные Методы 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, доступному от [1 119] эта страница . Это, тем не менее, добирается, все больше поддерживало .

Простое решение

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

Для изменения всех классов для элемента:

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

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

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

Для добавления дополнительного класса к элементу:

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

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

Для удаления класса из элемента:

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

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

объяснение этого regex следующие:

(?:^|\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 (такой как [1 115]) этому не рекомендуют поведения. Особенно на объемных приложениях, больше удобного в сопровождении кода достигается путем разделения разметки HTML от логики взаимодействия JavaScript.

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

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

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

второй шаг должен переместить onclick событие из HTML и в JavaScript, например, с помощью [1 122] 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>

примеры выше были воспроизведены ниже использования 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);