我无法使用JS操作CSS显示属性吗？

Question

我正在尝试将模式的显示值设置为在单击呼叫按钮后阻塞。我无法弄清楚为什么即使我做了拼写检查（即使我仔细检查了，JS表也无法更改它（我的意思是通过窗口控制台检查值，并检查它是否与我编写的JS表匹配））错误或以不同的方式命名元素，但我敢肯定没有错误。我曾经以为onclick = () =>方法可能无法正常工作，所以我改用了addEventListener()。我确定，当我在窗口控制台中对其进行编码时，它可以成功地将显示更改为“阻止”，而且我也可以确定它以其他模式显示在其他元素上，因此也不会被隐藏。我在一些论坛上冲浪，这些论坛包括初学者级的问题，例如写style.display = block而不是style.display: "block"，但是在任何地方都找不到相似之处。我一直在想我的类/ id表示法有问题。

所以这是代码：（index.scss）

.call {
    position: fixed;
    display: block;
}

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }    
}

（（index.js）

var call = document.querySelector("#call");
var modal = document.querySelector("#modal");
var close = document.querySelector("#close");
const openModal = () => {
    if(modal.style.display === "none") {
        modal.style.display = "block";
    }
};
const closeModal = () => {
    if(modal.style.display === "block") {
        modal.style.display = "none";
    }
}
call.addEventListener("click", openModal);
modal.addEventListener("click", closeModal);

（index.pug）

.call#call Iletisim
.modal#modal
    .modal-content#content
        span.modal-content-close#close ×

Answer 1

HTML元素的.style属性仅显示该元素具有的内联样式。那就是直接使用<a style="display: block;" />或Javascript element.style.display = "block";直接添加到元素的样式，因此您遇到的问题是，访问undefined时会收到style.display，因此您的style.display === "block" or "none"永远不会为真。作为程序员tip，处理此类问题的第一件事是在console.log和openModal函数中放置一个closeModal来检查它们是否被调用，并检查代码是否正在按预期运行。使用console.log(model.style.display)，您会注意到这一点。

要获得计算出的CSS样式，必须调用window.getComputedStyle(element);（DOC here），但这在占用CSS的情况下会占用大量CPU，实际上并不是很好的实践，因此，最好的方法是假设一个初始状态（如果没有显示状态，则假定为none），或使用类（根据我的经验，这是我推荐的方式），例如：

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }
    &.shown { // Notice the shown class I added here
        display: block;
    }
}

然后，您可以在模态中添加或删除.shown类，它将在您方便时隐藏和显示：

const openModal = () => {
    if(!modal.classList.contains("shown")) {
        modal.classList.add("shown");
    }
};
const closeModal = () => {
    if(modal.classList.contains("shown")) {
        modal.classList.remove("shown");
    }
}

顺便说一下，add和remove都将在知识上（或多或少）做好contains的准备，因此您无需检查：

const openModal = () => {
    modal.classList.add("shown");
};
const closeModal = () => {
    modal.classList.remove("shown");
}

[注意：最好使用类进行样式设置，而不是修改内联样式，因为将来您可以更改样式以显示动画（例如），而无需从Javascript进行任何更改。