使用 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>

Ps 錯別字.alert {positition → 位置 *)

Answer 2

document.getElementById() 只返回一個元素而不是數組。

如果你改變這個

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

到

m.classList.add("hide");

那么它有效嗎？

Answer 3

它可能會有所幫助。

 window.addEventListener('load', function() { setTimeout(function(){ document.getElementById("main-messages").style.display = "none"; }, 3000); })

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