脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS控制元素显示与隐藏

利用JavaScript控制元素(标签)的显示与隐藏

 更新时间：2023年07月14日 15:26:54   作者：软件开发技术深度爱好者  
这篇文章主要给大家介绍了关于如何利用JavaScript控制元素(标签)的显示与隐藏的相关资料,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控制元素显示与隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javascript实现网站加入收藏功能

    javascript实现网站加入收藏功能

    这篇文章主要介绍了javascript实现网站加入收藏功能的相关资料,需要的朋友可以参考下
    2015-12-12
  • JavaScript使用AutoDecimal解决运算精度问题

    JavaScript使用AutoDecimal解决运算精度问题

    这篇文章主要介绍了 JavaScript 运算中的精度问题及解决方案 AutoDecimal,指出 JavaScript 处理浮点数运算常出现精度问题,现有解决方案存在不足,为了解决这一问题,AutoDecimal 应运而生,本文给大家介绍了JavaScript使用AutoDecimal解决运算精度问题
    2024-12-12
  • 一步步教你用js简单实现新年倒计时

    一步步教你用js简单实现新年倒计时

    一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript中new关键字的使用详解

    JavaScript中new关键字的使用详解

    在 JavaScript 中,new 关键字不仅是面向对象编程的关键要素,还是创建实例的重要手段,本文将深入探讨 new 关键字的使用,理解它在对象创建和构造函数调用中的作用,需要的朋友可以参考下
    2023-11-11
  • Javascript幻灯片播放功能实现过程解析

    Javascript幻灯片播放功能实现过程解析

    这篇文章主要介绍了Javascript幻灯片播放功能实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • js 自制滚动条的小例子

    js 自制滚动条的小例子

    js 自制滚动条的小例子，需要的朋友可以参考一下
    2013-03-03
  • JS中取二维数组中最大值的方法汇总

    JS中取二维数组中最大值的方法汇总

    本文通过三种解决方案给大家介绍js中取二维数组中最大值的方法。介绍的非常详细，具有参考价值
    2016-04-04
  • JS中移除非数字最多保留一位小数

    JS中移除非数字最多保留一位小数

    这篇文章主要介绍了JS中移除非数字最多保留一位小数的实现代码，文章给大家提到了js处理数字保留2位小数,强制保留2位小数不够补上.00的完整代码，感兴趣的朋友一起看看吧
    2018-05-05
  • javascript实现信息的显示和隐藏如注册页面

    javascript实现信息的显示和隐藏如注册页面

    信息的显示和隐藏在某些时候还是比较使用的，就比如注册信息，下面有个不错的示例，感兴趣的朋友可以了解下
    2013-12-12
  • 不得不知的ES6小技巧

    不得不知的ES6小技巧

    ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用
    2018-07-07

最新评论