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

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

本文关键字：媒体 应用 了解 查询 置数据 CSS 中为 JS 是否      更新时间：2023-10-07

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

例如：

CSS

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

JS-

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

如果窗户有一定的宽度，并且有特定的媒体查询，我会尝试打开抽屉。

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

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

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

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

$('#target').css('content'); //"sidebar-open"
相关文章：