javascript - 是否可以在 CSS 中为 JS 设置数据以了解某些媒体查询正在应用？

Question

有没有一种方法可以让您的 Javascript 知道正在应用特定的 CSS 媒体查询，而无需在您的 Javascript 中复制媒体查询的条件？我在想类似 HTML 数据属性的东西，但用于 CSS。

例如:

CSS

@media (min-width: 94em) {
    .menu{
        -data-break: sidebar-open;
    }
}

JS

if( $('.menu').cssData('break') == 'sidebar-open' ){
     ...
}

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

我知道我可以通过在 JS 中使用宽度来做到这一点，但我想找到一种方法来做到这一点而不复制宽度变量。我也知道我可以使 JS 以媒体查询中的 CSS 规则为条件，但这在这种情况下没有用。

Answer 1

虽然这不是一个很好的解决方案，但您可以做的是为某个目标元素设置内容属性。

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

由于该元素不是 :before 或 :after，因此内容将计算为 none 以进行渲染，但您仍然可以阅读Javascript 的值:

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