如何在 html 中消失/出现内容？ [复制]答案

【问题标题】：How to disappear/appear content in html? [duplicate]如何在 html 中消失/出现内容？ [复制]
【发布时间】：2022-01-17 04:26:08
【问题描述】：

我想通过 javascript 函数在 html 文件中出现/消失 <div>。我该怎么做？

【问题讨论】：

您可以将其display 样式从block 更改为none。通过分配 style 属性或更改具有这些样式的类。
这能回答你的问题吗？ Show/hide 'div' using JavaScript

标签： javascript html css

【解决方案1】：

这是一个非常简单的方法。

function togglehide(id){

    var el = document.getElementById(id);
  el.classList.toggle('hideme');
  
}

.hideme{display:none}

<button onclick="togglehide('mydiv')">Click me</button>
<br>
<div id="mydiv">
put some content here
</div>

【讨论】：

【解决方案2】：

选择它，然后设置它的style，或添加一个用于隐藏的 CSS 类。

document.querySelector("#element-id").classList.toggle("d-none");

【讨论】：

感谢您的帮助

【解决方案3】：

let div = document.querySelector('div');
div.style.display = 'none'; // this will make it as if it didn't exist
div.style.opacity = 0 // this will make it transparent

【讨论】：

感谢您的帮助

【解决方案4】：

将 style 属性设置为 none 以隐藏内容。

document.getElementById("element").style.display = "none";

【讨论】：

这行得通。谢谢