Как проверить и поменять атрибут на JS

51

Метод getAttribute('open') возвращает значение атрибута. У булевых атрибутов (таких как open, disabled, checked, hidden) значения нет, оно пустое (""). В JavaScript пустая строка приводится к false. Из-за этого тернарный оператор будет всегда думать, что атрибута нет, и пытаться добавить его снова.

Вот как это сделать правильно, от самого современного способа к классическому:

1. Идеальный вариант: toggleAttribute() (Современный стандарт)

В DOM API есть специальный метод именно для таких случаев. Он сам проверяет наличие и либо добавляет, либо удаляет атрибут.

JavaScript
button.addEventListener('click', () => {
    modal.toggleAttribute('open');
});

Это самый чистый, читаемый и правильный код для переключения булевых атрибутов.

2. Правильный ручной вариант: hasAttribute()

Если тебе по какой-то причине нужно написать условие вручную (например, ты делаешь что-то еще в ветках if/else), используй метод hasAttribute(). Он возвращает строгий boolean (true или false).

JavaScript
button.addEventListener('click', () => {
    // Через if/else (читаемее)
    if (modal.hasAttribute('open')) {
        modal.removeAttribute('open');
    } else {
        modal.setAttribute('open', '');
    }
});

Или через тернарный оператор, как у тебя:

JavaScript
button.addEventListener('click', () => {
    modal.hasAttribute('open') ? modal.removeAttribute('open') : modal.setAttribute('open', '');
});

Бонус: Если modal — это тег <dialog>

Если твое модальное окно реализовано через нативный HTML тег <dialog>, то работать с атрибутами напрямую не рекомендуется. У этого элемента есть свои методы и свойства:

Через свойство DOM:

JavaScript
button.addEventListener('click', () => {
    modal.open = !modal.open; // Переключаем свойство open
});

Через API метода (Лучшая практика для <dialog>):

JavaScript
button.addEventListener('click', () => {
    if (modal.open) {
        modal.close(); // Закрывает диалог
    } else {
        modal.showModal(); // Открывает как модальное окно (с backdrop)
        // или modal.show() для простого открытия без затемнения фона
    }
});

Резюме: Забудь про getAttribute для проверки наличия булевых атрибутов. Используй hasAttribute для проверки и toggleAttribute для переключения.

Связанные записи