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

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属性添加到元素,该元素的优先级高于任何内部或外部CSS样式,除非它们"是" !important.

您还可以考虑做的是避免这种情况,即在Javascript中切换一些CSS类而不是设置style属性.这样你就可以避免使用了!important.