javascript - 根据屏幕大小隐藏和显示元素

Question

我正在尝试制作当网页在较小的屏幕上显示时隐藏和显示菜单的按钮。当显示宽度超过 640px 时，我想保留整个菜单。我只被允许使用 CSS 和 JavaScript。

这是我写的JS函数:

var b = document.getElementById ("menu-button");
b.addEventListener("click", showMenu, false);
var i = 0;
function showMenu () {
    i++;
    if(i % 2 == 1)
        document.getElementById("menu").style.display = "block";
    else
        document.getElementById("menu").style.display = "none";
}

在较小的屏幕上显示页面时有效。

当我单击按钮隐藏菜单(将“菜单”显示更改为 none)然后增加页面大小时，当屏幕大于 640px 时我的菜单不会出现.

这个媒体媒体查询不做这个工作:

@media screen and (min-width:640px) {
    #menu {
        display: block;
    }
}

Answer 1

您需要将 !important 添加到 CSS 属性，例如:

 #menu { display:block!important; } 

您的 Javascript 将 style 属性添加到具有 higher priority 的元素比任何内部或外部 CSS 样式都重要，除非它们"is"!important。

为了避免这种情况，您还可以考虑在 Javascript 中切换某些 CSS 类，而不是设置 style 属性。这样您就可以避免使用 !important。