javascript - 使用 getElementById 时添加类

Question

我有一个需要在几秒钟后隐藏的元素，但该元素只需要在这个特定实例中隐藏，因此我尝试向该元素添加一个 Id 。问题是，如果我 getElementsByClassName，我的 JS 仅将 CSS 类应用于元素。

元素:

<div id="main-messages" class="alert alert-{{ message.tags }}">

JS:

var m = document.getElementById("main-messages");

setTimeout(function(){
   if (m && m.length) {
       m[0].classList.add('hide');
   }
}, 3000);

CSS:

.alert {
    positition: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    transition: .5s ease-out
    margin-bottom: 0;
}
.alert.hide {
  visibility: hidden !important;
  opacity: 0;
  transform: translateX(0px);
  transition: visibility 0s 2s, opacity 2s linear;
}

我还尝试通过 Id 创建 CSS 元素并向其添加 .hide 类，但这不起作用......例如#main-messages.hide{

Answer 1

getElementById 返回单个元素，但不返回 nodeList。
在您的代码中，m.length 始终未定义 (false)，m[0] 也是如此。您必须将类添加到单个元素，不带索引:

var m = document.getElementById("main-messages");

setTimeout(function() {
  if (m) {
    m.classList.add('hide');
  }
}, 3000);

.alert.hide::after {
  content: "I'm hidden... really!";
  color: red;
}

<div id="main-messages" class="alert">test... </div>

P.s.拼写错误 .alert {position → 位置 *)