用javascript更改后css不再响应

Question

我有一个使用媒体查询具有响应式 css 的网站。

有一个div，叫“map”

对于宽度 500px 及以上的容器内有地图

//html stucture
//header, menu

<div id="conteiner">
   //texts , images, forms, etc
   <div id="map"></div>
   <input type="button" id="showpage"...
   <input type="button" id="showmap"...
</div>

//footer

@media screen and (max-width: 500px) {
//other divs style here
#map {width:100%; text-align:center; position:relative; padding-left:0.1%; padding-right:0.1%; padding-bottom:60%;}
#showpage #showmap {display:none;}
}

对于宽度 500 像素及以下，地图变为“全屏”，只需设置除地图和显示页面按钮之外的所有内容 display:none。

@media screen and (min-width: 500px) {
//other divs style here, set to display none
#map {width:100%; heigth:100%; text-align:center; position:relative; margin:0; padding:0;}
#showpage {display:block; position: absolute;}// floats over map
#showmap {display : none;}
}

到目前为止，好的，如果我调整浏览器的大小，我会看到地图全屏显示，并在浏览器的宽度超过 500 或不超过 500 时返回到容器 div 中。所以一切都是响应式的。

问题：

当地图全屏时（浏览器低于 500 像素）我使用显示地图/显示页面按钮，以便用户可以从全屏地图切换到页面并返回到地图。

显示地图按钮在用户看到页面时可见，并且可以单击它再次查看全屏地图。

按钮使用 javascript 为 div 设置/取消设置 style.display:none。

如果用户点击按钮，css 不再响应。如果我单击显示页面按钮以“关闭”全屏地图，我会看到该页面。然后我将浏览器调整为更大，但地图永远不会重新出现在容器 div 中

我猜当 javascript 更改 css 时，更改是永久性的

我该如何解决这个问题？

谢谢

Answer 1

您可以添加/删除一个类，而不是直接通过影响 DOM 中的“样式”来隐藏元素。

在您的 CSS 中（某处；可能在媒体查询之前）：

.hidden { display: none; }

然后在你的 JavaScript 代码中：

function whatever() {
  // ...
  var theDiv = document.getElementById("something");
  if (time_to_hide( theDiv )) {
    theDiv.className += " hidden";
  }
  else {
    theDiv.className = theDiv.className.replace(/\bhidden\b/g, "");
  }
  // ...
}

现在您可以利用普通 CSS 规则来了解不同规则如何相互覆盖。如果您的“隐藏”规则位于 CSS 文件的顶部，则媒体查询中的任何内容都会覆盖它。 （在这种情况下，这可能无关紧要，因为您只想“隐藏”表示该元素不显示。）

因为您没有更改 DOM 中的样式，所以当“隐藏”类不存在时，旧规则的应用与添加该类之前的完全一样。