javascript - 使用 javascript 更改后，css 不再响应

Question

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

有一个div，叫做“ map ”

对于宽度为 500px 及以上的容器内有 map

//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 像素及以下的宽度， map 通过简单地设置除 map 和显示页面按钮之外的所有内容 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;}
}

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

问题:

本地图全屏时，(浏览器低于 500 像素)我使用 showmap/showpage 按钮，以便用户可以从全屏 map 切换到页面并返回到 map 。

显示 map 按钮在用户看到页面时可见，点击它可以再次查看全屏 map 。

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

如果用户点击按钮，CSS 将不再响应。如果我单击显示页面按钮“关闭”全屏 map ，我会看到该页面。然后我调整浏览器的大小使其变大，但 map 再也没有出现在容器 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 中的样式，所以当“隐藏”类不存在时，旧规则将完全按照添加类之前的规则应用。