@javascript DOM操作覆盖的媒体查询

我有一个@media查询，通过根据屏幕方向设置“display:none；”来隐藏/显示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属性设置了一个新的值，我发现解决这个问题的唯一方法是放置！在媒体查询中很重要，如下所示：

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

---

正在使用！重要信息：即使在DOM操作之后，使媒体查询保持持久的唯一方法是什么？

您看到这种行为的原因是jQuery fadeIn方法添加了内联CSS，因此这将覆盖样式表中的内容。你可以使用一些JS再次淡出/隐藏它。我不建议放置显示：无！这一点很重要，因为这样您将无法使用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();

如果你发布更多的代码，我可以给你一个更详细的答案

---

希望这能有所帮助。

您可以像这样将javascript封装在if语句中，但在响应式设计中效果不太好。这只是另一种方法

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

---

带有jQuery的动画/CSS通常使用相应的样式修改

style

属性。因此，如果它在其中写入一些

display

属性，将覆盖样式表中的

CSS

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

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

显然，没有其他方法可以从样式表中重写内联

CSS

。如果您考虑到这一点，对DOM节点的引用不能比直接在DOM节点本身的

style

属性中写入

CSS

更具体

在您的场景中，您可以在执行

jQuery

动画后重置元素的

样式

，因此在

fadeIn

完成后重置

样式

：

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

要按优先顺序简要列出不同的情况，请执行以下操作：

在“样式属性”中声明的样式！重要的关键词

在“样式表”中声明的样式！重要属性

在样式属性中声明的常规样式（不带！重要属性）

样式表中的常规样式

redneck style Removing:），获取淡入效果，在成功淡入时->删除覆盖媒体查询的样式（由淡入生成）

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

---

谢谢你的详细回答！“重置”解决方案确实有效，但是在执行重置之前元素短暂可见，因此在这种情况下，@media查询中的“！important”声明实际上是合理的：/

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