Javascript:使用vanilla javascript隐藏和显示文本
基础概念
Vanilla JavaScript 是指不依赖任何框架或库的纯 JavaScript。隐藏和显示文本是网页开发中的常见需求，可以通过操作 DOM（文档对象模型）来实现。
相关优势
- 性能：Vanilla JavaScript 不需要加载额外的库或框架，因此可以提高页面加载速度。
- 灵活性：直接操作 DOM 可以提供更高的灵活性和精确性。
- 学习曲线：对于初学者来说，理解 Vanilla JavaScript 的基本概念有助于更好地掌握 JavaScript 编程。
类型
- 隐藏文本：将元素的
display属性设置为none。 - 显示文本：将元素的
display属性设置为block或inline。
应用场景
隐藏和显示文本常用于以下场景：
- 表单验证错误提示
- 动态加载内容
- 菜单或导航栏的展开和收起
示例代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show Text</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button id="toggleButton">Toggle Text</button>
<p id="text" class="hidden">This text can be hidden or shown.</p>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js)
document.getElementById('toggleButton').addEventListener('click', function() {
var textElement = document.getElementById('text');
if (textElement.classList.contains('hidden')) {
textElement.classList.remove('hidden');
} else {
textElement.classList.add('hidden');
}
});参考链接
常见问题及解决方法
问题：为什么文本没有隐藏或显示？
原因：
- 选择器错误：可能选择了错误的元素。
- 事件监听器未正确添加：可能没有正确添加事件监听器。
- CSS 类名错误：可能使用了错误的 CSS 类名。
解决方法：
- 检查选择器是否正确，确保选择了正确的元素。
- 确保事件监听器已正确添加到按钮上。
- 检查 CSS 类名是否正确，并确保在 HTML 和 JavaScript 中一致。
通过以上步骤，你应该能够成功使用 Vanilla JavaScript 隐藏和显示文本。
相关·内容
我是javascript的新手。我想做的是使用vanilla javascript在点击时隐藏和显示一些文本。text</span></p>
<a class="text-danger toggle-button" aria-controls="toggle-content">show more</a> 这是javascript
浏览 34提问于2020-05-04得票数 0
2回答
(我想使用Javascript事件) 例如，首先使用css隐藏一个元素，然后当用户向下滚动到该部分时，使用vanilla Javascript显示该元素。</div>
#info { display :none;} 正在加载Javascript代码?...
浏览 12提问于2019-12-05得票数 0
我正在使用Bootstrap 4和Vanilla Javascript。我想根据在html中的<option>标签上选择的选项来显示和隐藏某些div。这是我的HTML示例。.hidden{} 这是我的javascript代码。document.getElementById("homeAppliances").classList.remove("hidden");
浏览 50提问于2020-08-28得票数 1
回答已采纳
文本显示/隐藏点击，工作只显示div，当点击隐藏时，它不会显示另一个div。
我想要这样的东西。由defualt 显示显示一个文本，并显示名为formula1的div，当单击显示时，它隐藏测试显示，并隐藏以前的div formula1和文本隐藏<code>E 29</cod
浏览 7提问于2012-12-15得票数 1
回答已采纳
我有一个简单的vue组件，将显示一个预加载器，当一些图像被加载或更改。它工作得很好，但是我不能在显示组件时禁用文档正文的溢出。在Javascript中有没有办法选择正文并将溢出设置为隐藏？我对vanilla javascript并不在行。
浏览 14提问于2020-05-21得票数 1
回答已采纳
2回答
我正在尝试通过点击'+‘来使文本显示和消失，但是我似乎不能使它工作。当我将它应用于其他部分时，第一个部分不再起作用？我更喜欢设置显示文本的最大高度，这样你就可以滚动阅读所有内容，但我不知道如何以及是否可能将'+‘变成'x’来关闭文本块。
浏览 19提问于2020-03-03得票数 0
还请注意，我的FirefoxDriver对象打开了本机事件下面是HTML和JavaScript的一个片段，当您开始键入输入字段时，可以自动完成输入字段中的文本。但是，由于我知道我们试图在WebDriver中匹配的确切值，所以我想模仿最终用户使用这个值在字段中键入的内容。这是如何做到的呢？
如果我不能做到这一点，我的答案将是直接设置隐藏字段与id。WebDriver脚本将只输入部分或全部文本(在ac_variation_id中设置值)，并且不会通过AJAX检索记录id (在var
浏览 8提问于2012-02-14得票数 0
回答已采纳
我正在学习javascript，并试图理解javascript为什么使用this.vanilla。var SomeVariable = [1, "bean", vanilla ?vanilla : "Madagascar Bourbon"];
使用与参数vanilla相同的名称似乎非常混乱。var VanillaBean = function(vanilla
浏览 1提问于2013-09-05得票数 0
回答已采纳
我有这样的代码，它隐藏了一个只包含一个特定单词的div，我一直试图隐藏任何包含这个单词的div，但也包含了更多的文本。
浏览 0提问于2019-01-22得票数 1
回答已采纳
2回答
想知道是否有一种方法可以在其他地方显示“大商业”中的项目数量编号。我使用引导徽章图像来显示手推车计数，但不知道如何获得数字只用于填充。
浏览 11提问于2013-10-15得票数 1
回答已采纳
我有一个带有子菜单的列表项目菜单，我需要在父级单击时显示/隐藏这些子菜单。我有这个工作在我的网站的其他领域，但我有问题选择这个元素，使其工作。单击元素也是一个链接，我需要防止默认或禁用它，以便子菜单显示。 我需要能够点击父链接来隐藏/显示子菜单 谢谢。menu-item-4421"><a href="//localhost:3000/about/management/">Leadershi
浏览 14提问于2019-06-23得票数 1
1回答
显示/隐藏功能
、、
我正在尝试使用jQuery或vanilla创建一个特性。我的特性应该能够显示/隐藏点击内容。最初的任务非常简单，我可以使用jQuery切换显示隐藏的div，但我也希望能够将FA图标和链接文本从“显示内容”切换到“隐藏内容”。
浏览 0提问于2018-10-23得票数 0
回答已采纳
在Dart包中，可以使用{{}}或bind-value语法创建绑定。当在代码中创建DOM元素时，这也是可能的吗？有点像和
new Element.html('<input type="text" bind-value=
浏览 1提问于2013-04-21得票数 1
回答已采纳
我有一个div，其中包含使用下拉菜单动态选择的文本。当我的页面加载文本时，在页面完全加载后消失之前会显示文本。有什么办法阻止这种情况发生吗？因为我只希望文本一旦被选中就会出现。
浏览 1提问于2014-07-16得票数 0
回答已采纳
2回答
所以我有一个数组，我希望能够隐藏和显示数组的每个元素，只需使用vanilla JavaScript单击它即可。尽管我对如何在这个实例中使用getElementById有点困惑，因为它是一个数组……<html> <script src="js/sender.js"></scripthead>
<div class=&
浏览 0提问于2017-10-31得票数 0
我有一些我的网站常见问题页面的javascript代码。所以，你点击这个问题，答案就会出现。现在，我不明白的是，当我点击一个问题时，它是打开的，当我点击另一个问题时，我想要关闭前一个问题。凯特function unhide(divID) {}</script>
<p
浏览 2提问于2013-03-01得票数 4
回答已采纳
2回答
Ajax调用后的Dom值
、、、
在同一个页面上，我有另一个函数，它使用Javascript将表中的所有元素解析为一个数组。问题是Javascript函数写入的是最初在安全密码字段中的内容，而不是AJAX函数将其更新为的内容。似乎Javascript在加载页面时并不提取当前的DOM值，而是提取DOM值。这是Javascript的默认特性吗?此脚本是用PHP/Javascript编写的，提前感谢您的帮助。
浏览 1提问于2011-09-10得票数 0
1回答
我正在使用C#.net开发一个web应用程序。，但实际上我需要它们在每5秒之后逐一显示。当我按下按钮时，textBox1应该显示，textBox2应该在5秒后显示。
浏览 2提问于2013-02-27得票数 1
回答已采纳
有没有可能使用只有CSS的链接来显示和隐藏文本--根本不使用JavaScript？注意“更多”链接。当您单击它时，它会取消隐藏文本。这个特殊的例子是JavaScript，但我不确定它是否可以用纯CSS完成。
浏览 3提问于2018-08-22得票数 86
我需要更改按钮的文本，但是我认为我不理解的问题是如何使用单独的文件将其更改回来。我需要使用jQuery来切换图片。这将隐藏图像并显示图像。我认为这个按钮是用HTML和JavaScript“硬编码”的。<
浏览 160提问于2018-09-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
