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

Question

我正在尝试将模式的显示值设置为在单击呼叫按钮后阻止。我无法弄清楚为什么即使我仔细检查了 JS sheet 也无法更改它（我的意思是通过 window 控制台检查值并检查它是否与 JS sheet 我写的）如果我犯了拼写错误或以不同的方式命名了一个元素，但我确信没有错误。有一次我认为 onclick = () => 方法可能效果不佳，所以我改用了 addEventListener() 。我确定当我在 window 控制台中对其进行编码时，它成功地将显示更改为块，而且我也确定它作为正常模式显示在其他元素上，因此它也没有被隐藏。我在一些论坛上冲浪，其中包括初学者级别的问题，例如写 style.display = block 而不是 style.display: "block" 但找不到任何相似之处。我一直在想我的 class/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;

Answer 1

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

要获得计算的 CSS 样式，您必须调用 window.getComputedStyle(element); (DOC here)，但这相当 CPU 消耗并且实际上当您有nice CSS，所以你能做的最好的方法是假设一个初始状态（如果没有显示状态，那么假设是none），或者使用classes（这是方式根据我的经验，我建议这样：

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

然后你可以添加或删除 .shown class 到模态框，它会根据你的方便隐藏和显示：

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");
}

注意：最好使用 classes 作为样式而不是修改内联样式，因为将来您可以更改样式以使用动画显示（例如），而无需更改任何内容Javascript.

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

I cannot manipulate CSS display property with JS?

html

javascript

css

sass

pug

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

I cannot manipulate CSS display property with JS?

html

javascript

css

sass

pug

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