Съвременните методи на HTML5 за промяна на класа
Съвременните браузъри са добавили classList, което осигурява методи за рационализиране на управлението на класната стая, без да е необходима библиотека:
За съжаление, те не работят в Internet Explorer до версия 10, въпреки че има подкрепа, за да добавите поддръжка за IE8 и IE9, на разположение от тази страница. Тя е, обаче, все повече и повече се поддържа.
Просто решение различни браузъри
За да промените всички класове на елемента:
За да замените всички съществуващи класове на една или повече нови класове, задаване на атрибут име на класа:
(Можете да използвате списък на ограничени пространства за използване на няколко класа.)
За да добавите допълнителен клас за елемента:
За да добавите клас на елемента, без да махате / без да се засягат съществуващите стойности, добавете интервал и новото име клас, например:
За да премахнете клас елементи:
За да изтриете един елемент в един клас, без това да повлияе на други потенциални класове изисква проста подмяна на регулярния израз:
Обяснение на този регулярен израз е както следва:
G флаг казва, че се повтаря, ако е необходимо, ако замяната е добавен на името на няколко пъти класа.
За да проверите дали този клас вече се прилагат към елемент:
Същият редовен експресията използвани по-горе за отстраняване на клас може да се използва като тест за това дали е налице специфичен клас:
Задачата на тези дейности събития OnClick:
Първата стъпка към постигането на тази цел е да се създаде функция и извикайте функцията в OnClick атрибут, например:
(Много грубо, библиотеката е набор от инструменти, предназначени за конкретна задача, а структурата обикновено съдържа няколко библиотеки, и предоставя пълен набор от отговорности.)
(Имайте предвид, че тук $ е обект на JQuery.)
Промяна класове, използвайки JQuery:
В допълнение, JQuery осигурява бърз достъп, за да добавите клас, ако не се използва, както и отнемане на класа, което прави:
Присвояване на функция за събитието кликване с JQuery:
Или без да се изисква идентификатор:
Свързани статии