Question

通过设置＆＃34; display：none;＆＃34;我有@media查询隐藏/显示DOM元素基于屏幕方向。以下CSS工作正常。

@media all and (orientation: landscape) {
  #header-container {
    display: none; 
  }
}

但是隐藏并在我的javascript中显示相同的元素后似乎打破了媒体查询。例如

//JS

this.element.find('#header-container').css(display: "none");

//And later..

this.element.find('#header-container').fadeIn(500);

不再根据方向隐藏/显示元素

我的猜测是.fadeIn（）方法为display属性设置了一个新值，我找到解决这个问题的唯一方法是将！important放在媒体查询中，如下所示：

@media all and (orientation: landscape) {
  #header-container {
    display: none !important; 
  }
}

使用！important是即使在DOM操作之后使媒体查询持久的唯一方法吗？

Answer 1

使用jQuery的动画/ CSS通常会使用相应的样式修改style属性。因此，如果它在那里写了一些display属性，它将覆盖样式表中的CSS。

<div id="header-container" style="display:block;opacity:1"></div>

@media all and (orientation: landscape) {
  #header-container {
    display: none; 
  }
}

应该是上面的情况，因此display将是block而不是none。内联样式具有最高优先级（仅使用important)例外。还请注意媒体查询doesn't have any extra precedence，它们的工作方式与IF语句类似。

与此同时，您可以使用[important][1]覆盖内联样式，如下所示：

@media all and (orientation: landscape) {
  #header-container {
    display: none !important; 
  }
}

显然，没有其他方法可以从样式表中覆盖内联CSS。如果您考虑到这一点，就不能在DOM CSS属性中直接在DOM节点本身上编写style，而是更多特定的DOM节点。 / p>

在您的方案中，您可以在执行style动画后重置元素的jQuery，因此在style完成后重置fadeIn：

this.element.find('#header-container').fadeIn(500, function(){
    $(this).attr('style', '');
});

以优先顺序简要列出不同的案例：



使用！important keyword在“style attribute”中声明的样式。



使用！important属性在“样式表”中声明的样式。



在样式属性中声明的正常样式（没有！important属性）。



样式表中的正常样式。

Answer 2

您看到此行为的原因是jQuery fadeIn方法添加了内联CSS，因此这将覆盖样式表中的内容。你可以有一些JS再次淡化它/隐藏它。我不建议将display：none！important放在上面，因为那时你将无法使用JS来控制可见性。我假设在某些状态下你想要显示这个元素。

以下任何一项都应该有效。

//JS

this.element.find('#header-container').css(display: "none");

//And later..

this.element.find('#header-container').fadeIn(500);

// Later again.

this.element.find('#header-container').fadeOut(500);
this.element.find('#header-container').hide();

如果您发布更多代码，我可以给您更详细的答案。

希望有所帮助。

Answer 3

您可以将javascript包装在这样的if语句中，但在响应式设计方面效果不佳。只是另一种方式可以做到。

if (window.innerWidth > window.innerHeight){
    some javascript for landscape position
}
else{
    some javascript for portrait position
}

Answer 4

redneck style removal :)，获得淡入效果，成功褪色 - ＆gt;删除样式（由淡入生成）女巫覆盖媒体查询。

this.element.find('#header-container').fadeIn(500, function() {
    $(this).removeAttr('style');
});

@media查询被javascript DOM操作覆盖

4 个答案: