Как изменить класс элемента с помощью JavaScript?

Вы также можете просто сделать следующее:

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

А чтобы переключить класс (удалить, если он существует, или добавить его, если нет), используйте:

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

В вашем вопросе вы привели функции для добавления, удаления и проверки наличия класса у элемента, написанные без использования 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, ' ');
    }
}

Функции работают корректно, но они имеют несколько недостатков. Например, вы не обрабатываете ситуацию с лишними пробелами в классе, и, если у элемента будет несколько классов, функция removeClass может работать некорректно.

Для использования этих функций в onclick у вас есть следующий код:

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

Обратите внимание на использование одинарных кавычек внутри onclick. Двойные кавычки будут вызывать синтаксическую ошибку.

Однако, как вы верно заметили, в современном JavaScript (особенно с популяризацией jQuery и других библиотек) гораздо проще и надежнее использовать встроенные методы, такие как classList:

function changeClass(btn, cls) {
    btn.classList.toggle(cls);
}

И тогда ваш HTML будет выглядеть так:

<button onclick="changeClass(this, 'someClass')">My Button</button>

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

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

Вопрос: Как правильно работать с классами элементов в чистом 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);
    }
}

Я использую следующие функции: hasClass, addClass, removeClass, replaceClass и toggleClass. Эти функции позволяют добавлять, удалять, заменять и переключать классы элементов. Однако у меня есть вопросы по поводу их корректности и эффективности. Правильно ли я использую регулярные выражения для проверки наличия классов? Могу ли я улучшить производительность этого кода?

Ответ:

Ваш код в целом выглядит неплохо, но есть несколько моментов, которые можно улучшить.

1. Использование регулярных выражений: Вы используете регулярные выражения для проверки классов, что может быть несколько избыточным. Вместо этого вы можете использовать метод classList, который был введён в более поздних стандартах JavaScript и позволяет более эффективно управлять классами.

2. Использование classList: Вместо вашего подхода с регулярными выражениями, вот как можно переписать функции с использованием classList:

function hasClass(ele, cls) {
    return ele.classList.contains(cls);
}

function addClass(ele, cls) {
    ele.classList.add(cls);
}

function removeClass(ele, cls) {
    ele.classList.remove(cls);
}

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

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);
    }
}

Используя classList, вы получите более понятный и производительный код.

3. Производительность: classList также обеспечивает лучшую производительность, так как он реализован на уровне браузера, и его методы, такие как add, remove и contains, работают быстрее, чем регулярные выражения.

Рекомендуется использовать classList для работы с классами, так как это современный и более оптимальный подход.

Судя по вашему коду, вы хотите изменить класс элемента при клике на него. Если вам нужно просто переключать класс, можно сделать это с помощью JavaScript, не прибегая к избыточным решениям.

<div class="firstClass" onclick="this.classList.toggle('secondClass')"></div>

Используя classList.toggle, вы сможете легко переключать классы без необходимости писать дополнительную логику. Это более чистый и эффективный способ, чем изменение className напрямую.

Если у вас есть другие вопросы или вам нужна помощь с более подробными решениями, дайте знать!

Если вас интересует, как выполнять действия с классами в JavaScript, вот несколько способов для каждой из четырех возможных операций: добавление, удаление, проверка и переключение классов.

1. Добавление класса

Способ 1: Лучший способ добавить класс в современных браузерах — использовать метод classList.add() элемента.

• Случай 1: Добавление одного класса

  function addClass() {
      let element = document.getElementById('id1');
      // добавляем класс
      element.classList.add('beautify');
  }
  

• Случай 2: Добавление нескольких классов

  Чтобы добавить несколько классов, укажите их через запятую в методе add().

  function addClass() {
      let element = document.getElementById('id1');
      // добавляем несколько классов
      element.classList.add('class1', 'class2', 'class3');
  }
  

Способ 2: Вы также можете добавлять классы к HTML-элементам с помощью свойства className.

• Случай 1: Перезапись существующих классов

  Когда вы присваиваете новое значение свойству className, предыдущее значение будет перезаписано.

  function addClass() {
      let element = document.getElementById('id1');
      // добавляем класс
      element.className = 'beautify';
  }
  

• Случай 2: Добавление класса без перезаписи

  Используйте оператор +=, чтобы не перезаписать предыдущие классы. Также добавьте пробел перед новым классом.

  function addClass() {
      let element = document.getElementById('id1');
      // добавляем один или несколько классов
      element.className += ' beautify';
      element.className += ' class1 class2 class3';
  }
  

2. Удаление класса

Способ 1: Лучший способ удалить класс из элемента — использовать метод classList.remove().

• Случай 1: Удаление одного класса

  Просто передайте имя класса, который необходимо удалить из элемента.

  function removeClass() {
      let element = document.getElementById('id1');
      // удаляем класс
      element.classList.remove('beautify');
  }
  

• Случай 2: Удаление нескольких классов

  Передайте несколько классов, разделенных запятыми.

  function removeClass() {
      let element = document.getElementById('id1');
      // удаляем классы
      element.classList.remove('class1', 'class2', 'class3');
  }
  

Способ 2: Вы также можете удалить класс, используя метод className.

• Случай 1: Удаление одного класса

  Если у элемента только один класс, и вы хотите его удалить, просто присвойте пустую строку свойству className.

  function removeClass() {
      let element = document.getElementById('id1');
      // удаляем класс
      element.className = '';
  }
  

• Случай 2: Удаление нескольких классов

  Если у элемента несколько классов, сначала получите все классы из элемента с помощью свойства className, затем используйте метод replace, чтобы заменить нужные классы на пустую строку, и, наконец, присвойте результат свойству className элемента.

  function removeClass() {
      let element = document.getElementById('id1');
      // удаляем класс
      element.className = element.className.replace('class1', '');
  }
  

3. Проверка класса

Чтобы проверить, существует ли класс в элементе, вы можете просто использовать метод classList.contains(). Он возвращает true, если класс существует, и false в противном случае.

function checkClass() {
    let element = document.getElementById('id1');
    // проверяем класс
    if (element.classList.contains('beautify')) {
        alert('Да! Класс существует');
    }
}

4. Переключение класса

Чтобы переключить класс, используйте метод classList.toggle().

function toggleClass() {
    let element = document.getElementById('id1');
    // переключаем класс
    element.classList.toggle('beautify');
}

Надеюсь, эта информация поможет вам эффективно управлять классами в вашем проекте!