javascript - 我可以在JavaScript中使用此媒体查询吗？

我试图让我的网站知道何时高于1096来执行一些CSS样式，这是我的代码

var mq = window.matchMedia('@media all and (max-width: 1096px)');
if(mq.matches) {
    window.parent.document.getElementsByClassName("sticky-leaderboard-ad-container")[0].setAttribute("style","padding-top: 4rem !important; margin-left: 0 !important");
}

请有人让我知道为什么这行不通吗？先感谢您

编辑：我不能使用CSS，它必须在javascript中

最佳答案

如果要在屏幕尺寸大于1096时使媒体响应，则应使用min-width: 1096px。 max-width: 1096px在屏幕小于或等于目标尺寸时捕获。

if (window.matchMedia("(max-width: 1096px)").matches) {
  /* The viewport is less than, or equal to, 1096px pixels wide */
} else {
  /* The viewport is greater than 1096px pixels wide */
}

要么：

if (window.matchMedia("(min-width: 1096px)").matches) {
  /* The viewport is greater than, or equal to, 1096px pixels wide */
} else {
  /* The viewport is less than 1096px pixels wide */
}

除了window.parent.document.getElementsByClassName()没有意义，将其更改为document.getElementsByClassName()