如何使用 javascript 更改媒体查询中的元素答案

【问题标题】：how to change elements in media queries with javascript如何使用 javascript 更改媒体查询中的元素
【发布时间】：2017-07-16 06:06:52
【问题描述】：

如何使用 javascript 更改媒体查询中定义的元素？

我的目的是让隐藏的元素用 javascript 可见，而这个元素应该只在屏幕尺寸小于 1000 像素的情况下可见。因此，一旦元素在屏幕小于 1000 像素时可见（通过鼠标单击），当用户随后将窗口大小调整为大于 1000 像素时，该元素应该被隐藏。

这是代码，在代码本身中有一些用途的解释。

<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style media="screen" type="text/css">
    #mobile-only, #mobile-only-after-click { display: none; }
    @media screen and (max-width: 1000px) {
      #mobile-only { display: block;}
    }
  </style>
  <script>
    function show () {
      document.getElementById("mobile-only-after-click").style.display = "block";
    }
  </script>
</head>
<body>
  <div>In desktop view this is the only visible div</div>
  <div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div>
  <div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>
</body>
</html>

我尝试添加以下内容，但它不起作用。第三个 div 在显示后不会隐藏，并且在该事件之后使窗口宽度超过 1000 像素。

@media screen and (min-width: 1000px) {
   #mobile-only-after-click { display: none; } 
}

【问题讨论】：

当您使用 javascript 更改内联样式时会发生这种情况，它们会覆盖样式表。
感谢您的回复，但使用此解决方案，移动专用 div 始终处于隐藏状态，即使在应该可见的小屏幕上也是如此。
这样吗？ codepen.io/mcoker/pen/pwBvre

标签： javascript css media-queries

【解决方案1】：

这里有 3 个可能的解决方案。

解决方案 #1

我们可以使用简单的window.onresize 事件观察器覆盖媒体查询，并保持显示的元素可见，或者在屏幕超过 1000 像素时隐藏它。

要对此进行测试，您需要点击 Expand Snippet 按钮以全屏查看代码 sn-p，以便激活媒体查询。

function show() {
  document.getElementById("mobile-only-after-click").style.setProperty('display', 'block', 'important');

  window.onresize = function() {
  if (window.innerWidth >= 1000) {
    document.getElementById("mobile-only-after-click").style.display = 'none';
  } else {
    document.getElementById("mobile-only-after-click").style.display =
 'block';
  }
}
}

#mobile-only,
#mobile-only-after-click {
  display: none;
}

@media screen and (max-width: 1000px) {
  #mobile-only {
    display: block;
  }
}

<div>In desktop view this is the only visible div</div>
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div>
<div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>

解决方案 #2

更好的解决方案可能是向元素添加一个新类，该类使用新的媒体查询。在这个解决方案中，我们可以忘记 window.onresize 事件观察器，只需向元素添加一个新的 .shown 类，它将使用一组新的 CSS 规则来显示/隐藏元素。

function show() {
  document.getElementById("mobile-only-after-click").classList.add('shown');
}

#mobile-only,
#mobile-only-after-click {
  display: none;
}

#mobile-only-after-click.shown {
  display: block;
}

@media screen and (max-width: 1000px) {
  #mobile-only {
    display: block;
  }
}

@media screen and (min-width: 1000px) {
  #mobile-only-after-click.shown {
    display: none;
  }
}

<div>In desktop view this is the only visible div</div>
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div</div>
<div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>

解决方案 #3

最佳解决方案 - 如果可以更改 HTML，您可以将 #mobile-only-after-click 元素移动到 #mobile-only 元素内。这对您现有的 JS/CSS 没有任何改变。

function show() {
  document.getElementById("mobile-only-after-click").style.setProperty('display', 'block', 'important');

}

#mobile-only,
#mobile-only-after-click {
  display: none;
}

@media screen and (max-width: 1000px) {
  #mobile-only {
    display: block;
  }
}

<div>In desktop view this is the only visible div</div>
<div id="mobile-only">In mobile view this div is extra. <a href="#" onclick="show(); return false;">Click</a> to see a third div
  <div id="mobile-only-after-click">This third div should only be visible for mobile users. It should be hidden for desktop users after resizing the window to a larger size, after it was shown in a small screen upon a click.</div>
</div>

【讨论】：

谢谢布雷特！很有帮助。
太好了，很高兴我们能提供帮助。并将回答您问题的解决方案标记为已接受的解决方案。

【解决方案2】：

您可以尝试一些 JQuery。 slideToggle() 用于整体显示第三个 div。在线文档中的标准示例应该可以工作。第二个和第三个 div 的可见性可以通过 css 处理。或者再次使用 JQuery，从未使用过它，但您可以通过某种方法获得浏览器宽度。

祝你好运，

【讨论】：