Question

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll(".night").forEach((e) => {
        e.addEventListener("click", () => {
            let settingsBox = document.querySelector(".settings_box");
            if(settingsBox.style.display === "none") {
                settingsBox.style.display = "block";
            } else {
                settingsBox.style.display = "none";
            }
        })
    });
});

页面加载后：

.settings_box设置为display: none

当我单击.night元素时，浏览器会在display: none中击中.settings_box并将display: none赋予element，可能是.settings_box。当我再次单击时，它将display: none中的block设置为element。

Answer 1

通过使用document.querySelector(".settings_box")，您将获得与提供的选择器（在这种情况下为.settings_box）匹配的第一个元素，然后您对该元素实例进行操作，而不是对该特定选择器的样式进行操作。

要实际上修改某些选择器的样式，您必须使用该选择器创建样式表，但您可能不想这样做。

隐藏某些样式的替代解决方案是创建类似这样的内容：

// in stylesheet
.hide-boxes .settings_box {
  display: none;
}

然后在dom中，将hide-boxes类添加到祖先元素，所有框消失，当您放下该框时，它会再次出现。

更改元素是我的元素，而不是直接我的元素

1 个答案: