使用 getElementById 时添加类

Question

I have an element which I need to hide after a few seconds but this element only needs to be hidden in this particular instance so I am trying to add an Id to the element. Problem is that my JS is only applying CSS class to the element if I getElementsByClassName .

The element:

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

The JS:

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

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

The 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;
}

I have also tried to create the CSS element by Id and add the .hide class to it but that did not work.. eg #main-messages.hide{

Answer 1

getElementById returns a single element, but not nodeList.
In your code, m.length is always undefined (false), and m[0] as well. You must add class to a single element, without index:

 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 typo .alert {positition → position *)

Answer 2

document.getElementById() only returns one element not an array.

If you change this

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

to

m.classList.add("hide");

does it work then?

Answer 3

It may help.

 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>