css更改后不再响应

我有一个网站，有响应的CSS使用媒体查询。css更改后不再响应

有一个div，叫做“映射”

对于宽度500像素和上面有通过简单地设置在容器

//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除地图和showpage按钮。

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

到目前为止，OK，如果我调整浏览器我看地图走全屏，并返回容器DIV中，当浏览器的宽度超过500与否。所以一切都是敏捷的。

问题：

当该映射为全屏，（浏览器下方500像素）我使用showmap符/ showpage按钮，以便用户可以从全屏地图切换到页面并回到地图。

当用户看到页面时，Showmap按钮是可见的，并且可以再次单击它以查看全屏地图。

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

如果用户单击按钮，css为不再响应。如果我点击showpage按钮来“关闭”全屏地图，我会看到页面。然后我调整浏览器来获得更大的，但地图永不再出现的div容器

我想，当javascript的改变CSS里面，变化是永久性

我该如何解决这个问题？

感谢

来源

2013-12-07 slevin

当你更新元素的“风格”的对象，这些设置将覆盖CSS。您可以添加/删除CSS类，而不是直接修改“样式”对象。这样，你的CSS仍然在控制之中。 – Pointy

@Pointy。快速反应和有趣的解决方案你能提供一个例子/链接吗？谢谢 – slevin

而不是通过影响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，转变作风时“隐藏”类不存在，那么旧的规则完全一样，加入在上课前，他们会这么做。

来源

2013-12-07 21:38:37 Pointy

因此，点击按钮调用'whatever'函数？而“东西”是一个div？ “你的隐藏规则”是什么意思？很抱歉，但对我而言这仍然不清楚 – slevin

是的;对不起，这应该只是一个例子。这个想法是，不是操纵'yourDomEement.style.display'，而是从“className”属性中添加或删除类名。然后你使用CSS规则来表示具有该类名称的元素应该是'display：none'。代码的工作原理取决于页面的工作方式。（“隐藏”规则是“隐藏”类的CSS规则;以“.hidden”选择器开始的规则。） – Pointy

@slevin - just thinking;如果你的媒体查询中有“display”css属性的规则，那么你可能希望这个“.hidden”规则在*之后去，而不是之前。您可能会遇到CSS特殊性规则的问题;如果是这样，只是问另一个问题，我会留意它:) – Pointy

css更改后不再响应

回答

相关问题