javascript - 媒体查询和 javascript 不能很好地结合在一起

Question

我注意到 FF、Chrome 和 Safari 的行为是这样的，如果您干预对象的显示属性，媒体查询将不再对该对象属性起作用。

这样，我准备了一个测试 html 代码，这里是 [1]...

你有什么想法不产生这种效果吗？我不认为将 css 媒体查询转换为 javascript 不符合一般性原则...

不久，我想在需要时(如果可能的话)使用媒体查询和 javascript 更改 DIV 的可见性。

[1]: http://paste.ubuntu.com/1046784/ (测试场景)

Answer 1

当您直接更新元素的“样式”时，该样式将覆盖 CSS 中设置的任何内容(除非 CSS 具有 !important 而本地样式没有)。

为避免该问题，请不要直接操作元素的样式。相反，添加或删除一个或多个“类”字符串，并在样式表中提供样式(可能受媒体查询影响)。即使您不处理媒体查询，以这种方式做事通常也会好得多。在 CSS 文件中更新样式内容比在 JavaScript 代码中寻找它更容易。