Question

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

我的目的是使用javascript显示隐藏元素，而此元素应仅在屏幕尺寸小于1000px时可见。因此，一旦在屏幕小于1000px时使元素可见（在鼠标单击时），则当用户将窗口大小调整为大于1000px时，应隐藏该元素。

这是代码，代码本身的目的有一些解释。

<!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在显示之后并且在该事件之后使窗口宽度超过1000px后不会被隐藏。

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

Answer 1

以下是3种可能的解决方案。

解决方案＃1

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

要对此进行测试，您需要点击展开代码段按钮以全屏查看代码段，以便激活媒体查询。

＆＃13;

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';
  }
}
}

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案＃2

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

＆＃13;

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

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

解决方案＃3

最佳解决方案 - 如果可以更改HTML，则可以移动#mobile-only-after-click元素中的#mobile-only元素。这不会改变现有的JS / CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

祝你好运，

乙

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

2 个答案: