位置:- 正文
JavaScript控制元素（标签）的显示与隐藏(javascript控制语句)
编辑：rootadminJavaScript控制元素（标签）的显示与隐藏 使用JavaScript有多种方式来隐藏元素：
本文链接地址:https://www.jiuchutong.com/zhishi/300367.html
转载请保留说明！
下一篇链接:https://www.jiuchutong.com/zhishi/300368.html
推荐整理分享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 】
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 对象代表一个单独的样式