Javascript 如果另一个元素具有类'；主动'；

我有一个名为

.burger

的按钮，它被赋予了一个名为

active

的附加类，可以在单击时进行切换

HTML

JS

这很好地工作，但我想做的是添加一个事件侦听器，它为

主体

标记提供一个

类。每当
处于活动状态时，禁用滚动
。burger

使该类处于活动状态

---

我如何使用香草javascript实现这一点？我正在学习，如果我的术语不太正确，我向您道歉。

不需要另一个

事件

来监听此

按钮内的更改

您可以在同一事件内切换body类

  var element = document.querySelector('.burger');
  var bodyEl = document.querySelector('body');

  element.onclick = function() {
     element.classList.toggle('visible');
     
     if (element.classList.contains("active"))
        bodyEl.classList.add('.disable-scroll');
     else bodyEl.classList.remove('.disable-scroll');
  }

或者您可以将其简化为像这样提到的@3limin4t0r

var元素=document.querySelector（'.burger'）；
var bodyEl=document.querySelector（'body'）；
element.onclick=function（）{
const isAdded=element.classList.toggle（“可见”）；
bodyEl.classList.toggle（“禁用滚动”，isAdded）；
}

。可见{
背景颜色：绿色；
}

Burger Button

好吧，您可以使用来侦听DOM更新，并在特定主体具有正在添加的特定类时触发回调，但我不建议您这样做

它会使您的代码更干净，可以找到您将

.active

添加到

.burger

的位置，然后在那里添加

。禁用滚动
到
正文
尝试以下操作：


element.classList.contains（'active'）？document.querySelector（'body'）.classList.add（'disable-scroll'）：document.querySelector（'body'）.classList.remove（'disable-scroll'）
您可以这样使用：


var元素=document.querySelector（'.burger'）；
element.onclick=函数（）{
element.classList.toggle（'visible'）；
}
常量观察者=新的变异观察者(({
目标,，
属性名称
})=>document.body.classList.toggle（'disable-scroll'，attributeName=='class'和&target.classList.contains（'visible'））；
观察者，观察（元素）{
属性：true
});
。可见{
背景颜色：绿色；
}
Burger
我的建议（使用箭头函数和三元运算符）：


var el=document.querySelector（“.burger”），
bodyEl=document.querySelector（“body”）；
el.onclick=（）=>{
el.classList.toggle（“可见”），
包含（“活动”）？bodyEl.classList.add（“禁用滚动”）：bodyEl.classList.remove（“禁用滚动”）
};
。可见{
背景颜色：橙色；
}
Burger按钮
您可以将其简化为
const isAdded=element.classList.toggle（“可见”）
然后是
bodyEl.classList.toggle（“禁用滚动”，isAdded）
我选择了简化版，它工作得非常好，谢谢您的帮助！不客气
  var element = document.querySelector('.burger');
  var bodyEl = document.querySelector('body');

  element.onclick = function() {
     element.classList.toggle('visible');
     
     if (element.classList.contains("active"))
        bodyEl.classList.add('.disable-scroll');
     else bodyEl.classList.remove('.disable-scroll');
  }