Питання Змінити клас елемента за допомогою JavaScript


Як я можу змінити клас елемента HTML у відповідь на a onClick подія за допомогою JavaScript?


2290
2017-10-12 20:06


походження


"Атрибут class в основному використовується для позначення класу в таблиці стилів, однак він також може бути використаний JavaScript (через HTML DOM) для внесення змін до елементів HTML із заданим класом". -w3schools.com/tags/att_standard_class.asp - Triynko
element.setAttribute(name, value);  Замініть name з class. Замініть value з будь-яким ім'ям ви дали клас, вкладені в лапки. Це уникає необхідності видалення поточного класу та додавання іншого. Це jsFiddle приклад показує повний робочий код. - Sandy Good
Для зміни класу елемента HTML з onClick скористайтеся цим кодом: <input type='button' onclick='addNewClass(this)' value='Create' />   і в розділі JavaScript: function addNewClass(elem){ elem.className="newClass"; } Інтернет - Iman Bahrampour


Відповіді:


Сучасні методи 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 KB для простого зміни класу, якщо ви виконуєте будь-яку суттєву кількість роботи 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);



3302
2017-10-12 20:45



Відмінна відповідь Петро. Одне питання ... чому це так? краще Що робити з JQuery, ніж Javascript? JQuery відмінно, але якщо це все, що вам потрібно зробити - що виправдовує включення всього JQuery libray замість декількох рядків JavaScript? - mattstuehler
@mattstuehler 1) фраза "ще краще x" часто означає "краще (ви можете) x". 2) Щоб досягти серйозної мети, jQuery призначений для надання доступу до маніпуляцій з DOM, і дуже часто, якщо вам потрібно робити подібні речі, як тільки ви повинні це робити повсюди. - Barry
Одна помилка з цим рішенням: коли ви натискаєте кнопку декілька разів, він додасть клас "MyClass" до елемента кілька разів, а не перевірятиме, чи він вже існує. Таким чином, у вас може виникнути атрибут класу HTML, що виглядає приблизно так: class="button MyClass MyClass MyClass" - Web_Designer
Якщо ви намагаєтесь видалити клас 'myClass' і у вас є клас 'prefix-myClass', регулярний вираз, який ви вказали вище для видалення класу, залишить вас у вашому className: 'prefix-' - jinglesthula
Вау, три роки і 183 року, і ніхто не помітив це до цих пір. Дякую jinglesthula, я виправив регулярний вираз, щоб він неправильно видалити частини імен класів. / / На мій погляд, це хороший приклад того, чому коштує використовувати Framework (як-от jQuery) - такі помилки, як це виявляються і фіксуються раніше, і не вимагають змін у звичайному коді. - Peter Boughton


Ви могли б просто зробити так:

document.getElementById ('id') classList.add ('class');
document.getElementById ('id') classList.remove ('class');

І перемикати клас (видаліть, якщо існує, ще й додайте його):

document.getElementById ('id') classList.toggle ('class');

380
2017-08-05 17:44



Я вважаю, що це залежить від HTML5. - John
Вам знадобиться Елі Грей classList шов - ELLIOTTCABLE
Варто відзначити, що це не працює в версіях IE менше 8. - Lloyd
Мережа розробників Mozilla стверджує, що він не працює, як правило, в Internet Explorers менше 10. Я вважаю, що це твердження є правильним у моїх тестуваннях. Очевидно, що Eli Gray shim потрібен для Internet Explorer 8-9. На жаль, я не міг знайти його на своєму сайті (навіть при пошуку). Брошура доступна на посилання Mozilla. - doubleJ
atow "classList" має часткову підтримку в IE10 +; немає підтримки для Opera Mini; ще повна підтримка в інших стандартних браузерах: caniuse.com/#search=classlist - Nick Humphrey


У одному зі своїх старих проектів, які не використовували jQuery, я створив такі функції для додавання, видалення та перевірки наявності елемента класу:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Так, наприклад, якщо я хочу на клацати, щоб додати якийсь клас, я можу використовувати цю кнопку:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

На сьогоднішній день, напевно, краще використовувати jQuery.


98
2018-05-28 07:32



Це чудово підходить, коли ваш клієнт не дозволяє використовувати jQuery. (Тому що ви в кінцевому підсумку майже створює свою власну бібліотеку.) - Mike
@Mike Якщо клієнт не дозволяє вам використовувати jQuery, чи не могли б ви просто пройти і відновити лише ті функції, які вам потрібні у вашій власній бібліотеці? - kfrncs
@ kfrncs Оскільки мені, як правило, не потрібна така велика структура. Для проекту, про який я думав, єдиними функціями, якими я потребував, були функції 3 класу (має, додавати, видалити) та функції cookie (має, додати, видалити). Все інше було або індивідуально, або спочатку добре підтримане. Тож усе разом було лише 150 рядків, перш ніж міняти, включаючи коментарі. - Mike
Чувак, його 4 години ночі і велике спасибі. Vanilla JS це те, що ми використовуємо в моєму проекті, і це було заощадженням життя. - LessQuesar
Це моє улюблене рішення для цього. Я використовую його скрізь. Я вважаю, що це найефектніший спосіб досягти додавання та видалення класів, коли у вашого проекту ще немає іншого способу зробити це. - WebWanderer


Ви можете використовувати node.className подобається так:

document.getElementById('foo').className = 'bar';

Це має працювати в IE5.5 і вгору відповідно ППК.


64
2017-10-12 20:33



це може перезаписати будь-який і всі інші класи на об'єкт ... так що це не так просто. - Eric Sebasta


Вау, здивовано, тут тут дуже багато надмірно великих відповідей ...

<div class="firstClass" onclick="this.className='secondClass'">

46
2018-01-05 19:14



так, але ненав'язливий javascript - це краща практика .. - Lloyd
Я б сказав, що ненав'язливий JavaScript - страшна практика написання прикладу коду ... - Gabe
Я б не погодився, тому що я думаю, що приклад коду повинен стати гарним прикладом. - thomasrutter
Хороший приклад може навчати і висвітлювати уяву в той же час. Не слід замінювати думки, але надихати на це. - Anthony Rutledge
Інші відповіді не є надмірними, вони також зберігають існуючі класи на елементі. - gcampbell


Використання чистого коду JavaScript:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

40
2017-09-20 15:26



так само, як і тут: snipplr.com/view/3561/addclass-removeclass-hasclass - Jaider


Це працює для мене:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

27
2017-12-08 09:36



Відмінна відповідь! Достатньо залишити, щоб додати: встановіть для кожного класу CSS ім'я для вибору, щоб вказати стиль для групи елементів класу - Roman Polen.
Це працює для мене на FF, але коли я намагався використовувати el.className = "newStyle"; це не спрацювало, чому? - Lukasz 'Severiaan' Grela
Ви можете використовувати el.setAttribute('class', newClass)або краще el.className = newClass. Але ні el.setAttribute('className', newClass). - Oriol