Распечатайте информацию трассировки стека от C#

Современные методы 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 до версии 10, хотя есть 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 сообщает, что замена повторяется по мере необходимости, в случае, если имя класса добавлено несколько times.

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

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

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

Присвоение этих действий событиям onclick:

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

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

...
My Button

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

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

...
My Button

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

Рамочные библиотеки и библиотеки JavaScript

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

В то время как некоторые люди считают излишним добавить a ~ 50 & nbsp; KB framework для простого изменения класса, если вы выполняете какую-либо значительную работу 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);