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

Detecting media queries via javascript and apply appropriate data-state

本文关键字：数据 状态 应用 javascript 检测 媒体 查询 通过      更新时间：2023-09-26

我需要javascript#帮助。

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

我想使用javascript来检测媒体查询的更改，并将适当的数据状态添加到#objID中。

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

或者，如果屏幕在320px和728px之间，则切换到[数据状态="B"]

或者如果屏幕高于1024px，则切换到[数据状态="C"]

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

但我不知道如何实现它。请帮忙。感谢

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

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同步的好处。

这是一个Polyfill，适用于不支持如上所述的Polyfill的浏览器，本指南也可能对您有所帮助。

但是：

我有一个对象（#objID），它有三种不同的数据状态（A、B和C）。每个状态都包含一些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;
   }
}

您需要onresize事件

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

屏幕有两个维度，width和height，您描述了一个一维的比较，它没有给我们足够的信息来了解您想要实现的目标。无论如何，您可以在onresize事件中使用window.innerWidth和window.innerHeight。

相关文章：