更改媒体查询后重写CSS显示属性的Javascript

我有一张桌子，我需要在桌面上显示，在手机上隐藏，可以选择单击按钮显示，另一个按钮隐藏在手机上。它似乎工作正常，但当我选择Button2以在桌面上的最小化视图中隐藏表格（模拟移动视图）并拖动浏览器以将其大小增加到桌面时，除非刷新页面，否则表格将保持隐藏状态

基本上，javascript函数

close_table（）

设置

display:none

，它覆盖CSS

display:block@minwidth 481px

是否有一种方法可以确保在增加浏览器大小时（在选择按钮2之后）表格是可见的，而无需刷新

如有任何提示/帮助，将不胜感激

下面是示例代码

HTML:

<button id="Button1" onclick="view_table()">View table</button>
<div id="table">
    <button id="Button2” onclick="close_table()">Hide table</button>
</div>

JS:

---

可能会侦听窗口大小调整事件：

window.addEventListener("resize", function() {
    if(window.innerWidth > 481) { // if we have enough space
         view_table();
    }else{
        close_table();
    }
});

---

问题是，当您说

document.getElementById（'table'）.styles.*

时，您直接通过DOM设置元素的样式，DOM的优先级高于通过CSS进行的媒体查询。这意味着当再次触发媒体查询时，将不会发生任何事情，因为DOM元素现在具有更高优先级的样式，因此MQ规则将被忽略

您也无法执行常规的

.hide.show

类，因为无法仅通过媒体查询添加或删除类

这就使得EventListeners可以监听正在调整大小的窗口，并执行您想要的功能

我发现并能够使用它来编写这个代码片段，它完成了您正在寻找的功能

JavaScript可以访问window.matchMedia，它是存储文档中所有与媒体相关的项的地方。简而言之，这允许我们在JavaScript中直接处理媒体查询，比如字符串，而不仅仅是CSS中的字符串

下面是一些关于媒体查询的附加资源，在您学习这些内容时，这些资源可能有助于您浏览

对于代码片段，请单击“全页”以查看调整窗口大小的效果。

/*底部的注释代码正在运行。这是未注释的，便于阅读。
“严格使用”
如果（匹配媒体）{
常量mq=window.matchMedia（（最小宽度：481px））；
mq.addListener（WidthChange）；
宽度变化（mq）；
}
函数宽度更改（mq）{
if（mq.matches）{
视图_表（）
}否则{
关闭_表（）
}
}
函数视图_表（）{
document.getElementById（'table'）。style.visibility='visible'
document.getElementById（'button2'）。style.visibility='visible'
document.getElementById（'button1'）。style.visibility='hidden'
}
函数关闭_表（）{
document.getElementById（'table'）.style.visibility='hidden'
document.getElementById（'button2'）。style.visibility='hidden'
document.getElementById（'button1'）。style.visibility='visible'
}
*/
“严格使用”
if（matchMedia）{//从技术上讲，这是window.matchMedia，它实际上是存储在window对象上的一个属性函数。如果浏览器支持matchMedia，则这是真的。否则-不考虑任何媒体查询。
const mq=window.matchMedia（（最小宽度：481px）；//向matchMedia（）函数传递一个媒体查询字符串。
mq.addListener（WidthChange）；
WidthChange（mq）；//立即调用新的侦听器并传入mq对象。
}
函数宽度更改（mq）{
//等同于window.matchMedia（“（最小宽度：481px）”）。matches…matches是一个布尔值。
if（mq.matches）{
view_table（）//如果mq.matches为true（意思是>=481px）
}否则{
关闭_表（）
}
}
函数视图_表（）{
document.getElementById（'table'）。style.visibility='visible'
document.getElementById（'button2'）。style.visibility='visible'
document.getElementById（'button1'）。style.visibility='hidden'//您也可以在button1上说display:none，使表向上移动到按钮所在的位置，以获得更清晰的外观。
}
函数关闭_表（）{
document.getElementById（'table'）.style.visibility='hidden'
document.getElementById（'button2'）。style.visibility='hidden'
document.getElementById（'button1'）。style.visibility='visible'//如果您在上面说display:none，那么这需要与原始display属性完全相同。
}
//请注意，当窗口高于或低于最小宽度时，此选项将更新。
//如果单击“查看表格”按钮，则缩小窗口
//它不会隐藏任何东西，除非你超过最小宽度，然后后退。
//这是因为它只会在正确或错误的更改时触发。如果你愿意
//为了更具反应性，您可以添加更多条件或查看MediaQueryList.change（）。

main{
宽度：100%；
}
桌子{
宽度：70%；
边框：1px纯黑；
保证金：自动；
}
.按钮{
边缘顶部：5px；
边缘底部：5px；
文本对齐：居中；
}

视图表
样品
100
10000
样品
100
10000
样品
100
10000
隐藏表

改为更改元素上的类

因此，您的HTML可能如下所示：

<div class="can-be-hidden-on-mobile is-hidden-on-mobile">
    ...
</div>

document.querySelector(".can-be-hidden-on-mobile").classList.remove("is-hidden-on-mobile");

.is-hidden-on-mobile {
    display: none;
}

@media (min-width: 400px) {
    .is-hidden-on-mobile {
        display block;
    }
}

你的CSS是这样的：

<div class="can-be-hidden-on-mobile is-hidden-on-mobile">
    ...
</div>

document.querySelector(".can-be-hidden-on-mobile").classList.remove("is-hidden-on-mobile");

.is-hidden-on-mobile {
    display: none;
}

@media (min-width: 400px) {
    .is-hidden-on-mobile {
        display block;
    }
}

如果JS运行，则该类将被删除，并且不再应用

显示：none

---

如果用户的显示器宽度至少为400px，则

display:block覆盖它。
脚本正在应用规则
内联
，这将超过任何外部或内部声明的@media规则-除非您添加
！重要信息
有关@media规则的声明。使用！重要的是，只需做相反的问题，并始终优先考虑媒体查询。这会让按钮变得毫无用处。哇