首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Vanilla JS切换多个html文本元素?

使用Vanilla JS切换多个HTML文本元素可以通过以下步骤实现:

  1. 首先,确保在HTML文件中给每个需要切换的文本元素添加一个唯一的标识符,例如使用id属性。
  2. 在JavaScript文件中,使用document.getElementById()方法获取每个文本元素的引用,并将其存储在变量中。
  3. 创建一个函数,用于切换文本元素的内容。可以使用innerHTML属性来修改元素的文本内容。
  4. 在函数中,使用条件语句或循环结构来切换不同的文本内容。可以根据需要使用任何逻辑或算法来确定切换的顺序或方式。
  5. 在需要切换文本的事件或触发器中,调用切换函数。

以下是一个示例代码:

HTML文件:

代码语言:txt
复制
<div id="text1">文本1</div>
<div id="text2">文本2</div>
<div id="text3">文本3</div>
<button onclick="toggleText()">切换文本</button>

JavaScript文件:

代码语言:txt
复制
function toggleText() {
  var text1 = document.getElementById("text1");
  var text2 = document.getElementById("text2");
  var text3 = document.getElementById("text3");

  if (text1.innerHTML === "文本1") {
    text1.innerHTML = "新文本1";
    text2.innerHTML = "新文本2";
    text3.innerHTML = "新文本3";
  } else {
    text1.innerHTML = "文本1";
    text2.innerHTML = "文本2";
    text3.innerHTML = "文本3";
  }
}

这个示例代码中,我们通过点击按钮来切换文本元素的内容。初始状态下,文本元素显示为"文本1"、"文本2"和"文本3"。当点击按钮时,文本元素的内容会切换为"新文本1"、"新文本2"和"新文本3"。再次点击按钮,文本内容会切换回原始状态。

请注意,这只是一个简单的示例,你可以根据实际需求和具体情况进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

超赞Win10日历悬停效果,爱了爱了(使用HTML、CSS和vanilla JS)

在本文中,我将向您解释我是如何创建自己的Windows 10悬停效果日历的 本文可能有点复杂,但这是针对初学者的,如果您已经精通JS,并且知道Grid悬停逻辑,则可以快速遍历代码以了解发生了什么。...如果基础较差也没关系,建议点赞收藏日后慢慢研究 观察结果 1.毫无疑问, 这里使用了“网格悬停”效果,但是在光标周围的每个方向上突出显示了一个以上元素的边框,即,元素后面的元素也被突出显示了...2.日期没有按钮悬停效果 3.网格悬停效果不适用于活动日期(今天的date)元素。...5.点击日期(非有效日期)只有一个彩色边框 6.活动元素的边框被照亮 入门 您可能已经猜到了,我将从网格效果代码开始。 网格的前7个元素是星期名称和休息日期。...由于日历一次显示42个日期,因此我在中添加了42个win-btn元素win-grid。一些日期处于非活动状态,其中之一处于活动状态,因此我相应地添加了类。 HTML

1.9K10

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

在本教程中,我们将介绍如何使用 HTML、CSS 和 JavaScript 创建功能齐全的待办事项应用程序。...每个任务将包含以下元素: 用于将任务标记为完成的单选按钮 用于显示任务的 span 元素 一个编辑按钮和一个删除按钮 使用 CSS 设计样式 我们将从主体样式开始,以确保所有元素水平居中: body {...让我们首先使用 DOM(文档对象模型)获取以下 HTML 元素: const message = document.querySelector(".message"); const tasksContainer...function addTask(task) { } 在函数内部,我们想要执行以下操作: 使用当前时间戳定义任务 ID 将任务对象添加到allTasks数组中 将 html 变量分配给任务 HTML...使用 forEach 迭代每个按钮 对于每个按钮,我们使用最接近按钮的 li 元素this.closest("li)(其中 this 指的是单击的按钮)。

12810
  • H5+CSS3+JS逆向前置——HTML1、H5文本元素

    H5+CSS3+JS逆向前置——HTML1、H5基础 HTML概述 HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。...开发工具:Visual Studio Code 运行插件:Preview on Web Server 正文——文本元素 HTML文本元素主要可以分为以下几类: 段落元素使用 标签表示段落...引用元素使用 标签表示引用,可以包含引用的文本和引用的作者信息。 强调元素使用 或 标签表示强调文本。... P标签的属性包括: class:用于为元素指定一个或多个可选的类名,类名之间用空格分隔。...请注意,尽管通常被认为是最重要的标题,但实际上使用哪个标题取决于你的内容和你希望传达的信息。在一个页面上使用多个可能会分散读者的注意力,所以请谨慎使用

    17210

    如何使用 Selenium 在 HTML 文本输入中模拟按 Enter 键?

    我们可以使用 selenium 构建代码或脚本以在 Web 浏览器中自动执行任务。Selenium 用于通过自动化测试软件。...此外,程序员可以使用 selenium 为软件或应用程序创建自动化测试用例。 通过阅读本篇博客,大家将能够使用 selenium 在 HTML 文本输入中模拟按 Enter 键。...此外,我们将编写一个简单的代码,可以自动搜索百度百科网站上的文本 用户应该在他们的系统中安装 python 3.7+ 才能使用 selenium。要安装 selenium,请在终端上运行以下命令。...HTML_ELEMENT.send_keys(Keys.ENTER) 在百度百科上使用 selenium 搜索文本:在这一部分中,我们将介绍用户如何使用 selenium 打开百度百科站点并在百度百科或其他网站上自动搜索文本...方法: 1.从 selenium 导入 webdriver 2.初始化 webdriver 路径 3.打开任意网址 4.使用下面的任何方法查找搜索元素 5.在搜索字段中输入文本 6.按回车键搜索输入文本

    8.2K21

    如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...最重要的是,使用 vanilla JS router 可以减少你对框架的依赖。 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己的路由。...基于 History API 的 Vanilla JS 路由设置 先让我们仔细研究构建 URL 切换器所需的最少代码(而无需刷新页面),然后我会向你展示其的工作方式的 GIF 动图。...ID,第二个是“标签标题”文本,第三个参数是你希望地址栏中要现实的路径。...你如何选择重新加载 #content 元素中的内容完全取决于你自己和你的后端设计。

    3.9K20

    用 ref 访问 Vue.js 程序中的 DOM

    在本文中,你将了解如何在 Vue.js 中引用组件中的 HTML 元素。 前提条件 本文适用于所有使用 Vue 的开发人, 包括初学者。...Ref 是 Vue 的实例属性,用于在应用程序模板中注册或指示对 HTML 元素或子元素的引用。...显示输入的值 要显示 HTML 元素的输入值(在用户界面的文本框中键入的字符串),进入 submit 方法并将代码更改为: methods: { submit(){ this.counter...条件处理 Vue.js 的 refs 也可用于输出 DOM 元素内部的多个元素,例如使用 v-for 指令的条件语句。refs 在调用时返回一个 item 数组,而不是对象。...结论 本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素,例如值,子节点,数据属性,甚至它的 base URL。 另外我们还学会了实现这一目标的方法。

    2.9K20

    Vanilla JS——最轻快的JavaScript框架

    简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!...事实上,Vanilla JS使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。...核心功能; DOM(遍历/选择器); 基于原型的对象系统; AJAX; 动画; 事件系统; 正则表达式; 函数作为第一类对象; 闭包; 数学库; 数组库; 字符串库 开始使用 Vanilla JS是世界上最轻量的...使用Vanilla JS只需在应用的HTML里加入这行: 当你部署你的应用的时候,使用这个更快的方法: 没错!...性能比较 根据ID获取DOM元素 框架 代码 次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId

    6.2K40

    Github 移除 JQuery 的过程

    在这篇文章中,我们将解释一点我们最初是如何开始依赖jQuery的,我们是如何意识到不再需要jQuery的,并指出我们没有用另一个库或框架替换它,而是能够使用标准的浏览器api实现所需的一切。...作者希望在这个页面上有一个或多个js小部件元素吗?另外,如果我们更新了页面标记,并且意外地漏掉了js小部件的类名,浏览器中的异常是否会通知我们出了问题?...增量解耦 即使有了最终目标,我们知道仅仅分配所有资源是不可行的,我们必须重写从jQuery到vanilla JS的所有内容。...许多旧代码都与pjax和facebox jQuery插件的外部接口有显式耦合,因此我们保持了它们的接口相对相同,而在内部使用vanilla JS替换了它们的实现。...因此,即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下,我们能够完全删除某些遗留行为,而不必在vanilla JS中重写它们。

    2.1K10

    前端组件库_前端组件库有什么好处

    JavaScript 框架汇总 JavaScript 框架 react Angular jQuery Backbone.js Ractive.js KISSY Zepto.js Vanilla JS...– 全屏滚动效果 13.13 分屏滚动 multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素(Sticky) sticky...拖拽组件 Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件 13.19...富文本编辑器/Markdown编辑器/Markdown解析器 Simditor – 简单快速的富文本编辑器 BachEditor – 一个有情怀的编辑器 bootstrap-markdown marked...实用工具/其他插件 jquery-cookie FastClick – 处理移动端 click 事件 300 毫秒延迟 screenfull.js – 全屏切换 Async.js – 异步操作 html2canvas

    6.3K10

    「create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

    是因为最近一直在搞Strve.js生态,在自己捣鼓框架的同时也学到了很多东西。所以就本篇文章给大家介绍一种更加方便灵活的命令行脚手架工具,以及如何发布到NPM上。..., { "bin": { "create-demo": "index.js", "cvd": "index.js" } } 然后,我们先在这里使用yarn link命令来将此命令在本地可以运行...我们在之前那些模板交互文本会看到它们显示不同颜色,这正是它的功劳。...", "private": false, "keywords": ["strve","strvejs","dom","mvvm","virtual dom","html","template",...切换到npm源 npm config set registry=https://registry.npmjs.org 登录NPM(如果已登录,可忽略此步) npm login 发布NPM npm publish

    1.1K30

    CSS in JS 新秀:vanilla-extract 浅析

    前言 2021年,vanilla-extract 作为黑马登顶了 css-in-js 满意度榜首(虽然使用率仅为1%),号称是一个类型安全、高度兼容 TS 场景的库,国内相关讨论还很少,稍微看了一下还挺好用的...作为一个如果使用 css-in-js 会首选styled-components的我来说,比较关注的点主要是: All styles generated at build time Type-safe styles...但是需要理解的地方是,为了提高可维护性,「每个样式块只能针对某个元素(或者说是使用这个样式块的元素)」。...这样的设计,我觉得更是一种职责分离吧,每个样式块都针对某个元素,那么对于项目而言,样式的可维护性就大大提高了,相比于其他css in js(styled-components)就不容易出现样式冗余的问题...总结 目前了解下来,vanilla-extract是一个总体还不错的css in js库,虽然目前使用率比较低,但是后续厂商平台项目会考虑在一些地方使用看看效果(毕竟不会增大js体积)。

    2.1K10

    「1 分钟学 DOM 基础操作」添加和移除元素样式、添加至元素内、添加和移除事件、计算鼠标相对元素的位置

    一、添加或移除样式 1、添加相关样式至对应 DOM 元素 注意:如果添加多个样式至 DOM 元素,IE11 不兼容。...注意:同样在DOM元素中移除多个样式,IE11 不兼容。...参考:https://github.com/1milligram/html-dom 更多1分钟专题 1分钟搞懂什么是 JS 代理对象(proxies) 1分钟学会如何JS 对象代理(proxies)...实现对象的私有属性 1分钟学会 2 个复制文本到剪贴板的方法 1分钟学会如何JS 计算文本的宽度 1分钟学会个通用妙招,让你知道用户看了啥 1分钟用 CSS + HTML 实现个按字母吸附滑动的列表...(类似手机通讯录列表) 「1分钟学JS基础」移除最后一个字符、Promise.allSettled()的使用、日期数组排序

    1.7K30

    ​解密Prompt系列33. LLM之图表理解任务-多模态篇

    直接来看实验结论吧图片和文字的效果在不同数据集上存在差异,Gmini和GPT4,当使用Vanilla的表格文本和表格图片时,在FinQA上图片显著更好,而在TabFact和WikiTQ上文本显著更好。...,降低维基百科在预训练中的数据泄露问题再通过截图获取图片数据(VWTQ-Syn)VTabFact: 表格事实检查的另类QA问题,这里未提供原始html,因此使用csv数据转换成伪html,再使用Table...Renderer进行属性修改和截图FinTabNetQA: 本身是TSR任务,因此论文使用GPT4和HTML作为输入构建了QA对上面提到的Table Renderer其实就是随机修改表格的HTML样式...第一部分的核心其实是如何避免模型生成毫无意义的低质量数据Step2: 基于ChartData绘制图片基于以上获得的数据,论文使用GPT4的代码能力,生成matplotlib的绘图代码从而生成图片。...同时考虑到合并后参与attention计算的元素会减少,因此论文加入了被合并的元素数来调整scale。

    59910
    领券