如何在 JavaScript 中隐藏/显示 HTML 元素?
javascriptobject oriented programmingfront end technology
使用 Css 样式,我们可以在 javascript 中 隐藏 或 显示 HTML 元素。Css 提供 block 和 none 等属性来隐藏/显示 HTML 元素。
隐藏元素
示例
在下面的示例中,当单击"Hideme"按钮时,段落标签中的文本会消失,如输出所示。
<html> <body> <p id="hide">使用 JavaScript 隐藏 HTML 元素。</p> <input type="button" onclick="document.getElementById('hide').style.display='none' value="Hideme"> </body> </html>
执行上述代码后,将显示以下内容
从上面的块中,如果我们点击"Hideme"按钮,块中的文本将消失,如输出所示,只留下按钮。
输出
显示元素
示例
在下面的示例中,段落标签中的文本最初是隐藏的,但当单击"Showme"时,文本就会出现,如输出所示。
<html> <body> <p id="show" style="display:none">JavaScript 可以显示隐藏的 HTML 元素</p> <input type="button"onclick="document.getElementById('show').style.display='block'"value="ShowMe"> </body> </html>
执行上述代码后,屏幕上将显示以下内容
如果我们点击上述按钮,将执行以下输出