Question

我试图根据元素上满足的某些样式条件添加不同的事件侦听器。有没有一种方法可以检查样式值并以这种方式添加事件侦听器？我已经在互联网上搜索过，但是在这里找不到与我要执行的操作相匹配的答案。

JS document.getElementById（“ BurgerID”）。addEventListener（“ click”，openNav）;

function openNav() {
    document.getElementById("overlay").style.transform = "translateX(0%)";
    document.getElementById("overlay").style.zIndex = "995";
    document.getElementById("BurgerID").style.zIndex = "999";
}

if (document.getElementById("overlay").style.transform = "translateX(0%)") {
    document.getElementById("BurgerID").addEventListener("click", closeNav);
}   else {
    document.getElementById("BurgerID").addEventListener("click", openNav);
}

function closeNav() {
    document.getElementById("overlay").style.transform = "translateX(100%)";
    document.getElementById("overlay").style.zIndex = "995";
    document.getElementById("BurgerID").style.zIndex = "1";
}

Answer 1

在您的If语句中，使用两个等号或三个等号来测试是否应用了转换样式

if (document.getElementById("overlay").style.transform === "translateX(0%)") {
    document.getElementById("BurgerID").addEventListener("click", closeNav);
}   else {
    document.getElementById("BurgerID").addEventListener("click", openNav);
}

Answer 2

您不应该这样，但是您可以在单个事件处理程序中切换样式：

var overlay = document.getElementById('overlay');
var burger = document.getElementById('BurgerId');

function toggleNav () {
  if (overlay.style.transform === 'translateX(0)') {
    overlay.style.transform = 'translateX(100%)';
    burger.style.zIndex = 1;
  } else {
    overlay.style.transform = 'translateX(0)';
    burger.style.zIndex = 999;
  }
}

burger.addEventListener('click', toggleNav);

您不应该使用两个单独的功能执行此操作的主要原因是，您只能打开或关闭导航，具体取决于应用于其的初始样式。

添加基于CSS样式的事件侦听器？

2 个答案: