Question

我需要javascript #help。

我有一个具有三种不同数据状态的对象（#objID）（A B＆amp; C）（https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0）...每个状态都包含一些css来描述它的外观..

我想使用javascript检测媒体查询更改并将相应的数据状态添加到#objID。

（即。如果屏幕低于320px，则将[data-state =“A”]添加到#objID

或者如果屏幕在320px和728px之间，那么切换到[data-state =“B”]

或者如果屏幕高于1024px，则切换到[data-state =“C”]

）类似于这个概念.. http://zerosixthree.se/detecting-media-queries-with-javascript/

但我不确定如何实现它。请帮忙。感谢

Answer 1

您需要onresize事件

window.onresize = function(event) {
    //...
};

屏幕有两个维度，width和height，您可以描述一维比较，它不会为我们提供有关您想要实现的内容的足够信息。无论如何，您可以在window.innerWidth活动中使用window.innerHeight和onresize。

Answer 2

为简化起见，您可以执行以下操作：

window.matchMedia("(max-width: 320px)").addListener(function() {
    // Change the value of `data-state`
});

window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
    // Change the value of `data-state`
});

但是，您需要确保浏览器支持window.matchMedia并且还要处理维护状态等，以便知道您何时从一个断点跨越到另一个断点并确定哪个处于活动状态，因为两者都会在您退出时触发并输入断点。

至于在window.onresize上这样做，这不是一种非常有效的方法，如果你这样做，你必须扼杀/去抖。使用matchMedia仅在断点更改时触发，而不是在调整大小时连续触发。它还为您提供了保持CSS媒体断点与JS同步的好处。

This is a Polyfill适用于不支持上述内容的浏览器，this guide也可能对您有帮助。

<强>然而

我有一个具有三种不同数据状态（A B＆amp; C）的对象（#objID）。每个州都包含一些css来描述它的外观..

听起来好像你想根据data-state属性更改应用于元素的CSS样式，你将根据断点更改它？

如果我错了，请纠正我，但为什么不能使用媒体查询来更改应用于它的CSS呢？

@media only screen and (max-width: 320px) {
    /* State A */
   .css-selector {
        color: red;
   }
}

@media only screen and (min-width: 321px) and (max-width: 728px) {
    /* State B */
   .css-selector {
        color: green;
   }
}

@media only screen and (min-width: 728px) {
   /* State C */
   .css-selector {
        color: blue;
   }
}

通过javascript检测媒体查询并应用适当的数据状态

2 个答案: