JavaScript控制元素（标签）的显示与隐藏(javascript控制语句)

编辑：rootadmin

JavaScript控制元素（标签）的显示与隐藏使用JavaScript有多种方式来隐藏元素：

推荐整理分享JavaScript控制元素（标签）的显示与隐藏(javascript控制语句)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js控制html,javascript控制语句,js控制transition,js控制transition,JavaScript控制元素旋转,javascript控制语句,javascript控制语句,js控制元素位置,内容如对您有帮助，希望把文章链接给更多的朋友！

方式一、使用HTML 的hidden 属性，隐藏后不占用原来的位置

hidden 属性是一个 Boolean 类型的值，如果想要隐藏元素，就将值设置为 true，否则就将值设置为false

【HTML hidden 属性（Attribute）：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden 】

JavaScript控制元素（标签）的显示与隐藏(javascript控制语句)

var t = document.getElementById('test'); //选取id为test的元素

t. hidden = true;// 隐藏选择的元素

t. hidden =false;//显示

下面是使用方式一的示例源码：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>显示与隐藏方式一</title> </head> <body> <button type="button" onclick="show()">显示文本区域</button> <button type="button" onclick="hide()">隐藏文本区域</button> <br> <textarea id="output" cols="70" rows="6" >雪景</textarea> <h3>使用HTML 的hidden 属性，文本区域隐藏后不占用原来的位置</h3> <img id="pic" src="./雪景.jpg"> <script> function show(){ var t = document.getElementById('output');//选取id为test的元素 t.hidden=false; } function hide(){ var t = document.getElementById('output');//选取id为test的元素 t.hidden=true; // 设置隐藏元素 } </script> </body></html>

保存文件名为：元素（标签）的显示与隐藏方式一.html，用浏览器打开效果：

方式二、使用元素style 对象的display属性，隐藏后不占用原来的位置

style 对象代表一个单独的样式

本文链接地址:https://www.jiuchutong.com/zhishi/300367.html 转载请保留说明！

上一篇：《花雕学AI》06：抢先体验ChatGPT的九个国内镜像站之试用与综合评测(花雕典故)

下一篇：Java IO流 - 字节流的使用详细介绍(java 字节流字符流)