Удаление стиля [удаление/добавление класса по клику]

Вопрос-ответ JavaScript
1

Как при повторном нажатии удалить добавленный стиль?

document.querySelector(’#menu-link’).addEventListener(‘click’, () => {
document.querySelector(‘nav’).classList.add(‘active’);
})

2

Наверное ты имеешь в виду класс (CSS класс).

document.querySelector('nav').classList.toggle('active'); Метод toggle делает именно что надо для твоего случая.

3

А ещё можешь подсказать, как отменить действие при повторном нажатии?

document.querySelector(".menu").onclick = function() {
document.body.style.overflow = ‘hidden’;
}

4

Не понятно что имеешь в виду. Хочешь убрать overflow: hidden при повторном нажатии? Или не применять второй раз стиль overflow: hidde?

5

Да, убрать overflow hidden, при повторном нажатии

6

Самый надежный подход для такого случая - хочешь добавить-убрать стиль, сделай это через класс. Как это было описано в твоем первом вопросе. Остальные подходы (как и тот что я привожу ниже) будут ограничены в своей применимости, неуниверсальны.

Можно, например, проверить значение стиля и ставить новый в зависимости от значения текущего.

if (document.body.style.overflow === 'hidden') {
	document.body.style.overflow = null
} else {
	document.body.style.overflow = 'hidden'
}
7

Да, то что надо. Спасибо друг, ты лучший!

1 лайк