gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:07:49 25 4
gpt4 key购买 nike

我正在尝试制作当网页在较小的屏幕上显示时隐藏和显示菜单的按钮。当显示宽度超过 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;
}
}

最佳答案

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

 #menu { display:block!important; } 

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

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

关于javascript - 根据屏幕大小隐藏和显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40437427/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com