Javascript 是否可以在CSS中设置数据，以便JS知道正在应用某些媒体查询？

有没有一种方法可以让您的Javascript知道特定的CSS媒体查询正在应用，而不必在Javascript中重复媒体查询的条件？我在考虑类似于HTML数据属性的东西，但是对于CSS

例如：

CSS

JS

如果窗口处于某个宽度并且正在应用某个媒体查询，我将尝试在加载时打开抽屉

---

我意识到我可以通过在JS中使用width来实现这一点，但我想找到一种不复制width变量的方法。我还知道，我可以在媒体查询中根据CSS规则设置JS条件，但在这种情况下，这是没有用的。

虽然这不是一个好的解决方案，但您可能要做的是为某个目标元素设置content属性

@media ...
    #target {
        content: "sidebar-open";
    }

由于元素不是

：before

或

：after

，因此内容将计算为

none

，以便呈现，但您仍然可以使用Javascript读取值：

$('#target').css('content'); //"sidebar-open"

---

我正要发布同样的答案：DBrilliant！这将非常有帮助。这是利用

getComputedStyle（）

实际上不返回计算样式这一事实的一个更狡猾的例子。

@media ...
    #target {
        content: "sidebar-open";
    }

$('#target').css('content'); //"sidebar-open"