javascript - 如何使用 css 媒体查询隐藏以编程方式添加的 html 元素？

Question

在我的 View 初始化后，我使用 JavaScript 将一个按钮添加到我的 google map 区域:

let centerControlDiv: any = document.createElement('div');
centerControlDiv.className = 'collapseButton'; //trying to hide it by css
let controlUI = document.createElement('div');
centerControlDiv.appendChild(controlUI);

this.controlText = document.createElement('button');
this.controlText.innerHTML = '<i class="fa fa-angle-double-down" aria-hidden="true"></i>';
controlUI.appendChild(this.controlText);

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

但是，我只想在小屏幕上显示该按钮。因此我添加了以下媒体查询:

  @media (min-width: 0px) and (max-width: 992px) {
    .collapseButton {
      display: block  !important;
    }
    /* show it on small screens */
  }

  @media (min-width: 993px) {
    .collapseButton {
      display: none  !important;
    }
    /* hide it elsewhere */
  }

由于某种原因，这不起作用。如果我这样做:

document.getElementsByClassName("collapseButton")[0].style.display = 'none';

按钮隐藏成功。 我错过了什么？

更新:这是包括按钮在内的 DOM 片段:

Answer 1

我终于找到了解决方案:

@media (min-width: 0px) and (max-width: 992px) {
  /deep/.collapseButton {
    display: block;
  }
  /* show it on small screens */
}

@media (min-width: 993px) {
  /deep/.collapseButton {
    display: none;
  }
  /* hide it elsewhere */
}

添加 /deep/ 使其工作。仍然不知道为什么我必须添加这个。任何解释表示赞赏。