Сучасні методи HTML5 для зміни класів
Сучасні браузери додали classList, який надає методи, що дозволяють спростити управління класами, не вимагаючи бібліотеки:
На жаль, вони не працюють в Internet Explorer до версії 10, хоча є підтримка, щоб додати підтримку для IE8 і IE9, доступних з цієї сторінки. Це, проте, все більше і більше підтримується.
Просте крос-браузерні рішення
Щоб змінити все класи для елемента:
Щоб замінити всі існуючі класи одним або декількома новими класами, встановіть атрибут className:
(Ви можете використовувати список з роздільниками прогалин для застосування декількох класів.)
Щоб додати додатковий клас до елементу:
Щоб додати клас до елементу, не видаляючи / не впливаючи на існуючі значення, щоб додати пробіл і нове ім'я класу, наприклад:
Щоб видалити клас з елемента:
Щоб видалити один клас в елемент, не зачіпаючи інші потенційні класи, потрібна проста заміна регулярного виразу:
Пояснення цього регулярного виразу виглядає наступним чином:
Прапор g повідомляє, що заміна повторюється в міру необхідності, якщо ім'я класу було додано кілька разів.
Щоб перевірити, чи вже клас застосовується до елементу:
Таке ж регулярний вираз, що використовується вище для видалення класу, також може використовуватися як перевірка того, чи існує конкретний клас:
Присвоєння цих дій подій onclick:
Першим кроком до досягнення цього є створення функції і виклик функції в атрибуті onclick, наприклад:
(Дуже грубо, бібліотека являє собою набір інструментів, призначених для конкретного завдання, в той час як структура зазвичай містить кілька бібліотек і виконує повний набір обов'язків.)
(Зверніть увагу, що $ тут є об'єктом jQuery.)
Зміна класів за допомогою jQuery:
Крім того, jQuery надає ярлик для додавання класу, якщо він не застосовується, або видалення класу, який робить:
Призначення функції події click з jQuery:
Або, не вимагаючи ідентифікатора: