我不能用 JS 操作 CSS 显示属性？答案

【问题标题】：I cannot manipulate CSS display property with JS?我不能用 JS 操作 CSS 显示属性？
【发布时间】：2020-02-16 23:01:18
【问题描述】：

我正在尝试将模式的显示值设置为在单击呼叫按钮后阻止。如果我进行了拼写，我无法弄清楚为什么即使我仔细检查了 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 &times;

【问题讨论】：

标签： javascript html css sass pug

【解决方案1】：

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

要获得计算出的 CSS 样式，您必须调用 window.getComputedStyle(element); (DOC here)，但这会占用大量 CPU，而且当您拥有良好的 CSS 时实际上并不是很好的做法，因此您可以做的最好的方法是假设初始状态（如果没有显示状态，则假设为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 进行任何更改。

【讨论】：