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

标签 javascript css width media-queries

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

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

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

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

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

最佳答案

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

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

关于javascript - 媒体查询和 javascript 不能很好地结合在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11083975/

相关文章:

javascript - 线性数组的重采样算法(json)

javascript - Canvas 中随机放置的圆圈中的超光速引擎效果

javascript - 如何将从函数获取的变量传递给 onclick 事件

html - 背景图像被切断(两个图像并排)

javascript - 需要帮助对齐 Javascript 倒计时的结果

css - 响应式网页设计 : div width + padding not going across containing div even though they equal 100%

javascript - 删除 CSS 中的特定动画

javascript - CSS 样式属性名称——从常规版本到 JS 属性驼峰命名版本,反之亦然

CSS 左列和标题固定并居中

css - 当我为 UL 设置背景图像时,为什么当子元素已经设置了这些设置时我必须设置宽度和高度?