[javascript]使用 css 更改元素的样式，其样式已使用 javascript 修改

· 收录于 2024-01-06 16:58:08 · source URL

问题详情

我有一个过滤器栏，当屏幕具有一定宽度时显示，当屏幕变窄时它就会消失。我已经通过使用媒体查询在我的代码中实现了这一点，并且它有效。

当屏幕变窄时，会出现一个按钮，用于显示隐藏的栏。我已经在javascript中实现了这段代码，当我单击它时，该栏被显示/隐藏：它可以工作。

现在，我的问题是：当我用按钮显示隐藏的栏（所以窗口很窄）时，我增加了窗口的大小，直到达到栏必须显示的宽度，它没有。似乎 javascript 强加了栏的样式，因此媒体查询不起作用。如何管理？

我带有重要元素的代码如下所示：

function displayHideFiltrerPar() {

    let tmp = document.getElementById('container-left-small-screen');

    if (tmp.style.display == "none" || tmp.style.display == "") {
        tmp.style.display = "inline-block";
    } else {
        tmp.style.display = "none";
    }

}
@media (min-width: 576px) and (max-width: 767px) {
  
 .res-button-filtrer-par {
    display: flex;
    margin-bottom: 2em;
  }

  #container-left-small-screen {
    display: none;
    position: absolute;
    width: 50%;
    top: -130px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Size M  */
 .res-button-filtrer-par {
    display: none;
  }

  #container-left-small-screen {
    display: inline-block;
  }
}
<button class="res-button-filtrer-par res-button" type="button" onClick="displayHideFiltrerPar();">
    <span>Display filter bar</span>
</button>

<div id="container-left-small-screen">
    Filter bar
</div>

最佳回答

不要让按钮直接更改样式，让它添加和删除隐藏的类。然后，你可以使你的 CSS 不仅依赖于媒体查询，还依赖于该类，如这个简化的示例所示：

@media (max-width: 767px) {
  #btn {
    display: flex;
    margin-bottom: 2em;
  }
  #container-left-small-screen:not(.hidden) {
    display: inline-block;
  }
  #container-left-small-screen.hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  #btn {
    display: none;
  }
  #container-left-small-screen {
    display: inline-block;
  }
}
<button id="btn" onclick="document.getElementById('container-left-small-screen').classList.toggle('hidden')">
    Toggle filter bar
</button>

<div id="container-left-small-screen">Filter bar</div>

您可以使用 add 来添加类或使用 remove 来删除类，而不是 toggle 方法。