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

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

javascript css

如何使用javascript更改媒体查询中的元素,javascript,css,media-queries,Javascript,Css,Media Queries,如何使用javascript更改媒体查询中定义的元素我的目的是让一个隐藏元素在javascript中可见，而这个元素应该只在屏幕大小小于1000px时可见。因此，当屏幕小于1000px时，一旦元素变为可见（鼠标单击），当用户随后将窗口大小调整为大于1000px时，该元素应隐藏这是代码，在代码本身中有一些关于目的的解释 <!DOCTYPE html> <html lang="en"> <html> <head> <meta charse

如何使用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>

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

祝你好运

以下是三种可能的解决方案

解决方案#1

我们可以用一个简单的

窗口覆盖媒体查询。onresize

事件观察程序，保持显示的元素可见，或者在屏幕超过1000px时隐藏它

要测试这一点，您需要点击ExpandSnippet按钮全屏查看代码段，以便激活媒体查询

函数显示（）{
document.getElementById（“单击后才移动”）.style.setProperty（“显示”、“块”、“重要”）；
window.onresize=函数（）{
如果（window.innerWidth>=1000）{
document.getElementById（“仅在单击后移动”）.style.display='none'；
}否则{
document.getElementById（“仅在单击后移动”）.style.display=
"积木",；
}
}
}

#仅限移动设备，
#仅在单击后移动{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：1000px）{
#仅移动{
显示：块；
}
}

在桌面视图中，这是唯一可见的div
在移动视图中，此div是额外的。看第三部
第三个div应该只对移动用户可见。桌面用户在将窗口大小调整到更大的大小后，以及在单击后在小屏幕上显示后，应该将其隐藏。

这就是使用javascript更改内联样式时发生的情况，它们会覆盖样式表。感谢您的回复，但使用此解决方案，仅移动的div始终隐藏，即使在小屏幕上，它们也应该是可见的。像这样？塔克斯·布雷特！非常有帮助。很好，很高兴我们能帮忙。请将回答您问题的解决方案标记为已接受的解决方案。

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