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

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

您需要在CSS属性中添加!important ，例如：

 #menu { display:block!important; } 

您的Javascript将style属性添加到元素，该元素具有比任何内部或外部CSS样式更高的优先级 ，除非它们“是” !important 。

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

Answer 2

我建议不要设置这样的元素style ，在元素上切换类是推荐的方法

旁注，我也从id改为class ，这也是推荐的

此外， 特殊性是原因，在评论/答案中已经指出，为什么你的代码不起作用，更多内容在这里阅读： https ： //developer.mozilla.org/en/docs/Web/CSS/Specificity

 var b = document.querySelector(".menu-button"); b.addEventListener("click", function(e) { document.querySelector(".menu").classList.toggle("show"); }); 

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

 <div class="menu show">Hi, I'm a menu element</div> <button class="menu-button">Show/Hide</button> 

Answer 3

Connexo已经指出了答案，但扩展可能会对您和将来来到这里的其他人有所帮助。

HTML元素的“样式”可以设置在至少3个位置。 如果发生冲突，浏览器必须决定哪个应该赢。 使用的规则称为“特异性”。 如果您想要更全面的解释，请在https://css-tricks.com/specifics-on-css-specificity/上找到关于此主题的好文章。

粗略地说，在初始HTML“样式”属性中定义的任何样式都是最强大的，因此这将胜过CSS文件规则。 重要的是，在您的用例中设置样式，操作HTML样式属性。

因此，您的CSS将被代码中的样式属性设置所取代。

对于纯JS解决方案，您可以考虑向窗口onResize事件添加一个监听器。 如果您研究这种方法请注意，在某些浏览器中，事件会针对大小变化的每个像素触发，因此请寻找考虑到这一点的解决方案，否则该功能将被多次触发并可能降低喜悦你带给你的用户。

Answer 4

正如其他评论建议的那样，您在代码中尝试了不同的东西。 我建议使用css解决方案，您可以查看大多数网格用于设置其媒体查询的样式，以便在调整浏览器窗口大小或监视器缩小时显示/隐藏元素。

一个非常酷，轻量级的网格称为简单网格。

https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css

在第177行，“手持式”设备的媒体查询开始。 例如，将其添加到HTML文档中：

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css">
</head>
<body>
<button class="hide-on-mobile">MyButton</button>
</body>

如果浏览器窗口低于767px，则该按钮将不可见

Answer 5

您需要在css属性中添加！important。 因为您的JavaScript代码设置的元素样式属性优先于任何css选择器样式。