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

在我的视图初始化后，我使用javascript向我的google maps区域添加了一个按钮：

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);

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

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

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

更新：这是被剪掉的DOM，包括按钮：

---

我终于找到了解决办法：

@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/

使其正常工作。还是不知道为什么我要加上这个。感谢您的解释。

如果您不提及某人的答案的实际问题，也不给出反馈lol，那么请对其进行否决。但是，如果您知道解决方案，请继续并发布。地图是否放在

中？否，这是一个角度指令。它是不是在最后的标记中为您的

.collapseButton

添加了一个

style

属性，其中包含了一个

显示值

？简单的答案是，在这种特殊情况下，因为您需要重写JavaScript，所以您需要使用

！重要信息

，了解您的规则。如果这仍然不起作用，那么您的CSS文件中可能有一个错误，使它无法按预期进行解析。

@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 */
}