javascript - 用于检查 css 属性的 If 语句不起作用-6ren

javascript - 用于检查 css 属性的 If 语句不起作用

转载作者：可可西里更新时间：2023-11-01 12:55:58

我有一个 div，在单击时会显示一个小弹出菜单。我希望用户能够单击网站正文中的任意位置以关闭弹出窗口，但是当我为此添加代码时，弹出窗口根本无法再打开。

所以我尝试添加一个 if 语句，这样 closemenu() 函数只会尝试关闭已经打开的弹出窗口，但即使弹出窗口打开，该语句的计算结果似乎也是 false。

这是显示弹出窗口的 HTML:

    <div class="popcolor" onclick="showmenu()"> Click!
        <span class="popupcolor" id="myPopup">Pop!</span>
    </div>

这是CSS:

    .popcolor .show {
        visibility: visible;
        -webkit-animation: fadeIn 0.5s;
        animation: fadeIn 0.5s;
    }

这是 Javascript:

function showmenu() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

function closemenu() {
    var popup = document.getElementById("myPopup");
    if (popup.style.visibility == "visible") {
        popup.classList.toggle("close");
    };
}

这是关闭弹出窗口的 HTML:

<body onclick="closemenu()">

我已经浏览了所有我能找到的解决方案的帖子，但我仍然被困住了。感谢您的帮助。

最佳答案

您可以在 window 对象上使用 getComputedStyle() 方法，计算应用于您的 popup 的类产生的样式规则> 元素。

这为您提供了一种可靠的方法来确定不同样式规则的值，例如，将“关闭”类应用于 popup

类似于此的内容应该对您有用:

function closemenu() {

    var popup = document.getElementById("myPopup");

    // Get the computed style, that is the combination of styles 
    // resulting from your CSS classlist, etc
    var computedStyle = window.getComputedStyle(popup, null); 

    // Get visibility value from computed styles
    var visiblityValue = computedStyle.getPropertyValue("visibility")

    if (visiblityValue == "visible") {
        popup.classList.toggle("show"); // Correct this from "close" to "show"
    };
}

还有一些与您的实现有关的其他功能性问题导致了问题。考虑将您的 showmenu() 方法更新为:

function showmenu(event) {

    // Prevent event propagation, which would cause closemenu to call 
    // after this method is called
    event.stopPropagation()

    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

有关 getComputedStyle() 的更多信息，see the MDN documentation

关于javascript - 用于检查 css 属性的 If 语句不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52049021/