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直接在元素上设置样式，DOM的优先级高于媒体查询通过CSS执行的优先级。这意味着当再次触发媒体查询时，不会发生任何事情，因为DOM元素现在具有更高优先级的样式，因此忽略MQ规则。

您也无法执行常规的.hide .show课程，因为无法通过媒体查询添加或删除课程。

几乎留下了EventListeners，它将监听正在调整大小的窗口并执行您想要的功能。

我找到this article并且能够使用它来编写此代码段，以完成您正在寻找的功能。

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

以下是一些有关媒体查询的其他资源，在您了解这些内容时可能有助于浏览。

对于代码段，请点击整页，以便了解调整寡妇的大小。

Using Media Queries

Media Query types

MatchMedia()

＆＃13;

/* 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().

＆＃13;

main {
  width: 100%;
}

table {
  width: 70%;
  border: 1px solid black;
  margin: auto;
}

.buttons {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

＆＃13;

<!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>

＆＃13;

Answer 2

改为改变元素上的类。

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

account country

你的JavaScript就像这样：

CSS

你的CSS就像这样：

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

如果JS运行，则删除该类，document.querySelector(".can-be-hidden-on-mobile").classList.remove("is-hidden-on-mobile");不再适用。

如果用户的显示宽度至少为400px，则.is-hidden-on-mobile { display: none; } @media (min-width: 400px) { .is-hidden-on-mobile { display block; } }会覆盖它。

Answer 3

也许听一下窗口调整大小事件：

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

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

3 个答案: