利用JavaScript控制元素(标签)的显示与隐藏
使用JavaScript有多种方式来隐藏元素：
方式一、使用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 对象代表一个单独的样式声明（style statement）。
【Style display 属性（Property）：https://developer.mozilla.org/en-US/docs/Web/CSS/display或https://www.w3schools.cn/jsref/prop_style_display.asp 提示，将网址中的cn改为com就变成英文页面】
var t = document.getElementById('test'); //选取id为test的元素
t.style.display = 'none';// 隐藏选择的元素
t.style.display = 'block';// 以块级样式显示
下面是使用方式二的示例源码：
<!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>使用元素style 对象的display属性，文本区域隐藏后不占用原来的位置</h3>
<img id="pic" src="./雪景.jpg">
<script>
function show(){
var t = document.getElementById('output');//选取id为test的元素
t.style.display = 'block';
}
function hide(){
var t = document.getElementById('output');//选取id为test的元素
t.style.display = 'none';// 隐藏选择的元素
}
</script>
</body>
</html>保存文件名为：元素（标签）的显示与隐藏方式二.html，用浏览器打开效果：
方式三、使用元素style 对象的visibility属性，隐藏后其位置和大小仍被占用（只是显示为空白）
【Style visibility 属性（Property）：https://developer.mozilla.org/en-US/docs/Web/CSS/visibility或https://www.w3schools.cn/jsref/prop_style_visibility.asp 】
var t = document.getElementById('test'); //选取id为test的元素
t.style.visibility = 'hidden';// 隐藏元素
t.style.visibility = 'visible';// 显示元素
下面是使用方式三的示例源码：
<!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>使用元素style 对象的visibility属性，文本区域隐藏后其位置和大小仍被占用（只是显示为空白）</h3>
<img id="pic" src="./雪景.jpg">
<script>
function show(){
var t = document.getElementById('output');//选取id为test的元素
t.style.visibility = 'visible';
}
function hide(){
var t = document.getElementById('output');//选取id为test的元素
t.style.visibility = 'hidden';// 隐藏元素
}
</script>
</body>
</html>保存文件名为：元素（标签）的显示与隐藏方式三.html，用浏览器打开效果：
小结：这三种方式的区别效果体现在：
方式一和方式二隐藏后不占用原来的位置，方式三进行隐藏后元素位置和大小仍被占用（只是显示为空白）。
总结
到此这篇关于利用JavaScript控制元素(标签)的显示与隐藏的文章就介绍到这了,更多相关JS控制元素显示与隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家分享Bootstrap的图片轮播示例代码，小伙伴们快来围观吧。2015-08-08
在 JavaScript 中，可以用 instanceof 来判断一个对象是不是某个类或其子类的实例。2010-10-10
这篇文章主要介绍了JavaScript原型对象原理与应用,结合实例形式分析了javascript原型对象的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2018-12-12
js实现页面打印功能实例代码(附去页眉页脚功能代码)2009-12-12
简单对比分析JavaScript中的apply,call与this的使用
简单的说call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的2015-12-12
下面小编就为大家带来一篇在js中实现邮箱格式的验证方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，那么应该怎么解决，本文就来介绍一下2021-08-08
这篇文章主要介绍了原生JS实现图片网格式渐显、渐隐效果,需要的朋友可以参考下2017-06-06
JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下2022-12-12
Javascript Event事件中IE与标准DOM的比较
说是IE与DOM的比较，其实还是浏览器之间的比较，众多的浏览器中，IE独树一帜，并且占有大部分用户市场，后来的标准DOM虽然不少优点之处，但毕竟一般用户不关心也不知道这些，代码编写过程中，往往需要兼顾多个浏览器。2010-04-04
最新评论