如何使用 javascript 更改媒体查询中定义的元素？
我的意图是使用 javascript 使一个隐藏的元素可见，而这个元素应该只在屏幕尺寸小于 1000 像素时可见。因此，一旦元素在屏幕小于 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; }
}
最佳答案
这里有 3 种可能的解决方案。
解决方案#1
我们可以用一个简单的 window.onresize 事件观察器覆盖媒体查询，并保持显示的元素可见，或者在屏幕超过 1000 像素时隐藏它。
要对此进行测试，您需要点击 Expand Snippet 按钮以全屏查看代码片段，以便激活媒体查询。
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>关于javascript - 如何使用javascript更改媒体查询中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45122666/