时间戳

首页 > 解决方案 > 我不能用 JS 操作 CSS 显示属性？

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

问题描述

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

标签： javascripthtmlcsssasspug

解决方案

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

要获得计算出的 CSS 样式，您必须调用window.getComputedStyle(element);（此处为 DOC），但是当您拥有漂亮的 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 更改任何内容。

推荐阅读