我有一个表格,我需要在桌面上显示它并在移动设备上隐藏它,可以选择单击一个按钮来显示它,然后单击另一个按钮将它隐藏在后者上。它看起来工作正常,但是当我选择 Button2 以在桌面上以最小化 View 隐藏表格(以模仿移动 View )并拖动浏览器以将其大小增加到桌面时,除非我刷新页面,否则表格将保持隐藏状态。
基本上,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"
}
最佳答案
问题是,当您说 document.getElementById('table').styles.*
时,您是通过 DOM 直接在元素上设置样式,DOM 的优先级高于媒体查询通过 CSS。这意味着当再次触发媒体查询时,不会发生任何事情,因为 DOM 元素现在具有更高优先级的样式,因此 MQ 规则将被忽略。
您也不能执行通常的 .hide .show
类,因为没有办法仅通过媒体查询来添加或删除类。
这几乎剩下 EventListeners 将监听正在调整大小的窗口并执行您想要的功能。
我找到了 this article并且能够使用它来编写完成您正在寻找的功能的代码片段。
JavaScript 可以访问 window.matchMedia,这是存储文档的所有媒体相关元素的地方。简而言之,这允许我们直接在 JavaScript 中使用类似媒体查询的字符串,而不仅仅是在我们的 CSS 中.
这里有一些关于媒体查询的额外资源,可能有助于您在学习时快速浏览。
对于代码片段,单击整页让您看到调整窗口大小的样子。
/* 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().
main {
width: 100%;
}
table {
width: 70%;
border: 1px solid black;
margin: auto;
}
.buttons {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
}
<!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>
关于Javascript 在媒体查询更改后覆盖 CSS 显示属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46054334/