更改媒体查询后,Javascript覆盖CSS显示属性

Question

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

基本上,javascript函数close_table()设置display:none覆盖CSS display:block @min-width 481px.

有没有办法确保在增加浏览器大小时(在选择了button2之后)表可见而无需刷新？

任何提示/帮助将不胜感激.

以下是示例代码

HTML:

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

CSS:

@media (max-width:480px){
    #table {
        display: none;
    }
    #Button1 {
        display: block;
    }
}

@media (min-width:481px){
    #table {
        display: block;
    }
    #Button1 {
        display: none;
    }
}

JS:

function view_table() {
    document.getElementById("table").style.display="block"
}
function close_table() {
    document.getElementById("table").style.display="none"
}

Answer 1

问题是，当你说document.getElementById('table').styles.*你通过 DOM 直接在元素上设置样式时，它的优先级高于通过 CSS 进行的媒体查询。这意味着当再次触发媒体查询时，不会发生任何事情，因为 DOM 元素现在具有更高优先级的样式，因此 MQ 规则将被忽略。

您也无法执行通常的.hide .show类，因为没有办法仅通过媒体查询来添加或删除类。

这几乎使得事件监听器将侦听正在调整大小的窗口并执行您想要的功能。

我找到了这篇文章，并能够使用它来编写此代码片段，以完成您正在寻找的功能。

JavaScript 可以访问 window.matchMedia，这是存储文档的所有媒体相关项的位置。简而言之，这使我们能够直接在 JavaScript 中使用类似媒体查询的字符串，而不仅仅是在 CSS 中。

以下是一些有关媒体查询的其他资源，在您学习时浏览这些资源可能会有所帮助。

对于代码片段，单击整页即可查看调整窗口大小的效果。

使用媒体查询

媒体查询类型

匹配媒体()

/* Commented code on bottom is running. This is un-commented for easier readability.

'use strict'


if (matchMedia) { 
  const mq = window.matchMedia("(min-width: 481px)"); 
  mq.addListener(WidthChange); 
  WidthChange(mq); 
}

function WidthChange(mq) {
  if (mq.matches) {
    view_table() 
  } else {
    close_table()
  }
}

function view_table() {
  document.getElementById('table').style.visibility = 'visible'
  document.getElementById('button2').style.visibility = 'visible'
  document.getElementById('button1').style.visibility = 'hidden' 
}

function close_table() {
  document.getElementById('table').style.visibility = 'hidden'
  document.getElementById('button2').style.visibility = 'hidden'
  document.getElementById('button1').style.visibility = 'visible' 
}


*/

'use strict'


if (matchMedia) { // technically this is window.matchMedia, which is actually a function stored as a property on the window object. If the browser supports matchMedia then this is true. Else - no media queries regardless.

  const mq = window.matchMedia("(min-width: 481px)"); // The matchMedia() function is passed a media query string.

  mq.addListener(WidthChange);
  WidthChange(mq); // Immediately calls the new listener and pass in the mq object.
}

function WidthChange(mq) {
  // Equivalant to window.matchMedia("(min-width: 481px)").matches... .matches is a Boolean.
  if (mq.matches) {
    view_table() // If mq.matches is true ( meaning >= 481px)
  } else {
    close_table()
  }

}

function view_table() {
  document.getElementById('table').style.visibility = 'visible'
  document.getElementById('button2').style.visibility = 'visible'
  document.getElementById('button1').style.visibility = 'hidden' // You can also say display:none here on button1 to have the table move up into the spot where the button was for a cleaner look.
}

function close_table() {
  document.getElementById('table').style.visibility = 'hidden'
  document.getElementById('button2').style.visibility = 'hidden'
  document.getElementById('button1').style.visibility = 'visible' // If you do say display:none above, then this needs to beexactly what the original display property was.

}


// Note that this will update when the window go above or below the min-width.
// If you click the "view table" button  then make the window smaller
// it won't hide anything unless you went above the min-width then back down.
// This is because it's only triggered on a true or false change. If you want 
// it to be more reactive you can add more conditionals or check out MediaQueryList.change().

main {
  width: 100%;
}

table {
  width: 70%;
  border: 1px solid black;
  margin: auto;
}

.buttons {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main id="main">
    <div class="buttons">
      <button id="button1" onclick="view_table()">View table</button>
    </div>
    <div id="table">
      <table>
        <tr>
          <td>sample</td>
          <td>100</td>
          <td>10000</td>
        </tr>
        <tr>
          <td>sample</td>
          <td>100</td>
          <td>10000</td>
        </tr>
        <tr>
          <td>sample</td>
          <td>100</td>
          <td>10000</td>
        </tr>
      </table>
    </div>
    <div class="buttons">
      <button id="button2" onclick="close_table()">Hide table</button>
    </div>
  </main>
</body>
<script src="index.js "></script>

</html>