JavaScript 最简单实现隐藏和显示元素

最新推荐文章于 2023-05-05 11:02:24 发布
最新推荐文章于 2023-05-05 11:02:24 发布
阅读量2.2k 收藏 6
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript 实现隐藏和显示元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38336924/article/details/83182019
版权

JavaScript 最简单实现隐藏和显示元素

通过按钮点击实现的隐藏与显示

  • 新建HTML文件，复制如下代码即可
<!DOCTYPE html>
<html>
<head>
    <title>js 显示/隐藏 功能</title>
</head>
<body>
<p>点击按钮 显示/隐藏</p>
<button id="btn" onclick="fun()">button</button>
<div id="con" style="display: none">这是一个js 显示/隐藏 功能 demo</div>

<script type="text/javascript">
    var flag = false;
    var div = document.getElementById("con");

    function fun() {
        if (flag ^= true) {
            div.style.display = "block";    // 显示
        } else {
            div.style.display = "none";     // 隐藏
        }
    }
</script>
</body>
</html>
dadeity
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript控制HTML元素显示和隐藏
gavinloo的专栏
05-10 3664
<br />做问卷调查系统的时候需要依据用户的选项实时的显示或隐藏一些问题，这就需要用到Javascript来控制HTML元素的显示和隐藏。代码实现起来比较简单，简单的介绍一下如何实现的。<br /><br />1 、编写 js 函数<br /><script type="text/javascript"><br />    function display(id){<br />        var traget=document.getElementById(id);<br />         if(
HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式
01-06
本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式，使网页滚动条与整体设计更加协调一致。 首先，我们需要了解HTML5中引入的`overflow`属性，这是控制内容是否显示滚动条的关键。`overflow`...
javascript实现单按钮显示隐藏元素
海风依旧
11-16 6829
javascript实现单按钮显示隐藏元素
第五课：Js选择器方法汇总及实战（Salesforce常用）
sf_wilson
06-03 324
【前言】：HTML5的JavaScript选择器介绍 在HTML5出现之前使用JavaScript查找DOM元素，有以下三种原生的方法： getElementById：根据指定元素的id属性返回元素 getElementsByName：返回所有指定name属性的元素 getElementsByTagName：返回所有指定标签的元素 HTML5新增的选择器，方法有两种： querySele...
Salesforce LWC（三）：初步认识
weixin_44655098的博客
11-20 1345
LWC使用了大量的js，html和css所以学习起来比较好上手，组件的创建更加的简单方便。这里默认大家对这些语言都有简单的了解，就不多做介绍了。而且Aura中可以使用LWC，但是LWC中无法使用Aura，LWC比Aura拥抱了更多标准的规范,而Aura中大量使用了salesforce自定义的标签。 这部分内容依旧跟着trailhead来进行学习。 生命周期 Lightning Web Components提供了一些方法，允许你将代码与组件生命周期中的关键事件“挂钩”。这些事件包括组件为: Created
JavaScript以全屏模式显示元素
m0_63873004的博客
05-05 752
用于切换指定元素（或者默认全屏）的全屏模式。该函数支持各种主流浏览器，包括 Chrome、Firefox、Safari 以及 Internet Explorer 和 Edge 等。点击某个元素的时候让某个元素全屏显示。这段代码定义了一个函数。
JavaScript控制元素（标签）的显示与隐藏
cnds123的专栏
12-24 1万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
js实现密码隐藏及显示
08-11
总的来说，Bootstrap-show-password.js插件提供了一种简单有效的方式来实现密码输入框的隐藏和显示功能，它通过纯JavaScript实现，减少了对特定库或框架的依赖，提高了代码的可维护性和灵活性。通过以上步骤，你可以...
JS控制HTML元素的显示和隐藏的两种方法
11-22
利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 　　方法一： document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 　利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。 　　方法二： document.getElementById("EleId").style.display="none"; do
基于javascript实现最简单选项卡切换
10-20
【JavaScript实现最简单选项卡切换】是Web前端开发中常见的交互功能，主要用于组织和展示大量信息，提升用户体验。本文将详细介绍如何使用纯JavaScript实现这一功能，适用于初学者和需要快速搭建简单选项卡的开发者...
基于vue 实现表单中password输入的显示与隐藏功能
10-16
在Vue.js框架中，开发表单时经常需要处理密码输入的显示与隐藏功能，以便用户在需要时查看或隐藏他们的输入。以下是如何使用Vue来实现这一功能的详细步骤。 首先，我们创建一个简单的HTML结构，其中包括一个用于...
基于JavaScript实现文字超出部分隐藏
10-22
这个示例中，我们将讨论如何使用JavaScript来实现文字超出部分隐藏的功能。 首先，我们看到HTML结构中包含了两个`<div>`元素，它们都有不同的类名（`.text` 和 `.text1`）。这两个`<div>`分别包含了两段文字，其中`...
JavaScript隐藏元素的5种方法~纯干货分享
weixin_46370867的博客
11-29 1万+
Hello ~ 可爱的小伙伴我们又见面啦。 下面是我和大家分享的JS隐藏元素的5种方法，希望可以帮助到有需要的小伙伴。 让我们一起来看看吧 GO！ 第一种 <!DOCTYPE html> <html lang="en"> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8">
javascript隐藏和显示元素
热门推荐
worm0527的博客
12-14 3万+
使页面元素隐藏和显示可以有两种方式：方式一：设置元素style属性中的displayvar t = document.getElementById('test');//选取id为test的元素 t.style.display = 'none'; // 隐藏选择的元素 t.style.display = 'block'; // 以块级样式显示方式二：设置元素style属性中的visibility
jquery控制元素的隐藏和显示的几种方法。
qq_34802511的博客
09-04 6907
jquery控制元素的隐藏和显示的几种方法。   使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 1.$("#id").show()表示为display：block，    $("#id").hide()表示为display:none;   2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。  ...
javascript控制元素隐藏的方法
me_Jackyoyo的博客
06-11 1万+
javascript控制元素隐藏的方法是什么
【JavaScript】隐藏显示元素（实用）
Bug笔记
11-26 1395
JavaScript隐藏显示元素（实用）
input内容改变的触发事件
段占彪的博客
11-26 2万+
onchange 定义和用法 onchange 事件会在域的内容改变时发生。 onchange 事件也可用于单选框与复选框改变后触发的事件。 语法 HTML 中: &amp;amp;amp;amp;lt;input onchange=&amp;amp;amp;quot;SomeJavaScriptCode&amp;amp;amp;quot;&amp;amp;amp;amp;gt; JavaScript 中: object.onchange=func
JS 判断数组是否包含某个元素方法集合
段占彪的博客
10-16 1万+
JS 判断数组是否包含某个元素方法集合 文章目录JS 判断数组是否包含某个元素方法集合1、JavaScript indexOf() 方法2、jQuery.inArray()方法3、JavaScript find() 方法4、JavaScript findIndex() 方法5、for 循环和 if 判断 1、JavaScript indexOf() 方法 定义和用法 indexOf() 方法可返...
那怎么用javascript来显示和隐藏呢
最新发布
08-17
用JavaScript来显示和隐藏元素非常简单。以下是一种常用的方法。 首先，在HTML文件的标签内，创建一个样式表： ```html .hidden { display: none; } ``` 接下来，在标签内，创建一个要显示/隐藏的元素，比如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dadeity

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值