是否可以在 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' ){
     ...
}

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

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

Answer 1

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

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

由于元素不是 :before 或 :after，内容将计算为 none 以进行渲染，但您仍然可以使用 Javascript 读取值：

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

Is it possible to set data in CSS for JS to know certain media queries are applying?