Сучасні методики 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, доступною від цієї сторінки . Це, однак, все більше підтримується .
Просте крос-браузерне рішення
Використовується стандартний спосіб вибору елемента в 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)
The gПрапор указует замінити на повторення по мірі необхідності, в разі , якщо ім'я класу було додано кілька разів.
Щоб перевірити, чи клас вже застосовується до елемента:
Той самий регулярний вираз, який використовується вище для видалення класу, також може використовуватися як перевірка того, чи існує певний клас:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Призначення цих дій для onclick подій:
Хоча можна писати 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);