有没有办法可以使用 javascript 更改组件的隐藏值（在 css 中）？

Question

我有
<div class="notification">
可见性设置为隐藏（CSS）和
<button>.

我想：

单击按钮时，将 div 的可见性从 hidden 切换为 visible
5 秒后，将 div 的可见性切换回 hidden

我只能用JS，HTML，和CSS（没有jquery）

Answer 1

在按钮上添加一个事件监听器，它会向您的 div 添加一个额外的 class 并启动一个 timeIntervall，在该时间间隔移除 class。在 CSS 添加一个新规则，如果两个 class 都存在，则使 DIV 可见。

document.getElementById('btn').addEventListener('click', function () {
    let div = document.getElementById('myDiv');
    div.classList.add('visible');
    setTimeout(function(){
        div.classList.remove('visible');
    }, 5000);
})

.notification {
    visibility: hidden;
}

.notification.visible {
    visibility: visible;
}

<div id='myDiv' class="notification">Notification</div>
<button id='btn'>Show Div</button>

Answer 2

我猜这是你要找的

btn.onclick = () => {
  notification.style.visibility = 'visible';
      setTimeout(()=>{
        notification.style.visibility = 'hidden';
    },5000)
}

#notification {
  visibility: hidden;
}

<div id="notification">notification</div>
<button id="btn">show</button>

有没有办法可以使用 javascript 更改组件的隐藏值（在 css 中）？

Is there a way I can use javascript to change the hidden value (in css) of a component?

html

javascript

css

settimeout