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;}
}

对于500px及以下的宽度，只需设置除地图和展示位置按钮以外的所有内容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时返回容器div内部。所以一切都很敏感。

问题：

当地图为全屏时，（浏览器低于500px）我使用showmap / showpage按钮，这样用户就可以从全屏地图切换到页面并返回地图。

当用户看到页面时，

Showmap按钮可见，并且可以单击它以再次查看全屏地图。

按钮使用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中的样式，所以当“隐藏”类不存在时，旧规则的应用与添加类之前的规则完全相同。

用javascript更改后css不再响应

1 个答案: