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控制元素（标签）的显示与隐藏相关推荐

隐藏a标签html,a标签显示隐藏 js怎么控制a标签的显示和隐藏
js怎么控制a标签的显示和隐藏将标签放在层里面,控制层的显示和隐藏就可以: show是层的ID名, 隐藏层:document.getElementById("show").sty ...
javascript控制元素隐藏的方法
javascript控制元素隐藏的方法是: 设置元素style属性中的display: 例如[var t = document.getElementById('test'); t.style.disp ...
jquery控制table的行显示和隐藏
jquery控制table的行显示和隐藏一.开发记录我们经常会遇到需要在html中控制元素进行隐藏或显示的场景: 隐藏: $('#id').css('display','none'); 显示: $ ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧. 1.新建一个html文件,命名test.html,用来讲解jquery点击a ...
html 设置浏览器全屏显示,JavaScript控制浏览器全屏显示简单示例
本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: www.jb51.net JS全屏显示全屏显示退出全屏 // 判断各种浏览器,找到正确的方法 functio ...
1218 标签的显示与隐藏
标签隐藏给标签设置 display:none 可以让盒子隐藏标签的显示如果一个标签的显示状态是none 通过设置display为其它值,可以让该标显示例如: display:block
vue项目中返回按钮案例(用vuex控制返回按钮的显示或者隐藏)
在vue的项目中避免不了会有返回按钮的出现,恰当的页面,返回按钮的显示或者隐藏,我是用vuex来管理的, 好了,直接上代码吧 <el-button type="primary" ...
php单击回复出现回复框,javascript - 评论回复框的显示与隐藏问题
小葫芦2017-05-19 10:16:582楼假如你的HTML结构如下回复提交评价回复提交评价关于回复内容框的存在方式,个人认为是先渲染出来吧,避免点击的时候过多地去操作DOM,影响效率 ...

JavaScript控制元素（标签）的显示与隐藏

使用JavaScript有多种方式来隐藏元素：

JavaScript控制元素（标签）的显示与隐藏相关推荐

最新文章

热门文章