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

Vanilla JS如果包含字符串,则隐藏Div

Vanilla JS是指纯粹的JavaScript,即不依赖任何框架或库的原生JavaScript。在这个问题中,我们需要根据字符串是否包含在某个元素中来隐藏一个Div。

首先,我们需要获取要判断的字符串和要隐藏的Div元素。假设字符串存储在一个变量str中,Div元素的id为myDiv,我们可以使用document.getElementById()方法来获取该元素:

代码语言:txt
复制
var str = "要判断的字符串";
var div = document.getElementById("myDiv");

接下来,我们可以使用indexOf()方法来判断字符串是否包含在另一个字符串中。如果返回值大于等于0,则表示包含;如果返回值为-1,则表示不包含。根据判断结果,我们可以设置Div元素的display属性为none来隐藏它,或者设置为其他值来显示它。完整的代码如下:

代码语言:txt
复制
var str = "要判断的字符串";
var div = document.getElementById("myDiv");

if (str.indexOf("包含的字符串") >= 0) {
  div.style.display = "none"; // 隐藏Div
} else {
  div.style.display = "block"; // 显示Div
}

这样,当字符串包含指定的字符串时,Div元素将被隐藏起来。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的品牌商,我无法给出具体的推荐。但是腾讯云作为一家知名的云计算服务提供商,提供了丰富的云计算产品和解决方案,可以根据具体需求选择适合的产品。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多相关信息。

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

相关·内容

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安全; 目前,业界大多数相关竞品如 styled-components就是一个运行时方案且基于标签模板进行书写,主要基于stylis解析器解析,如果频繁更新props还会造成style标签大量插入到...在其内部通过eval库在编译时先执行得到className结果,避免在运行时执行过程; 再移除@vanilla-extract/css库,使其不会影响到生产环境下js包体大小; 构建样式API 这里只会对...总结 目前了解下来,vanilla-extract是一个总体还不错的css in js库,虽然目前使用率比较低,但是后续厂商平台项目会考虑在一些地方使用看看效果(毕竟不会增大js体积)。

2K10

jQuery 快速入门教程

jQuery对象 jQuery还支持将HTML字符串转换为临时DOM元素,并包含在返回的jQuery对象中。...同样的,如果筛选结果没有匹配任何DOM元素,返回一个空的jQuery对象。...如果没有为其传入表示值的参数,表示获取操作,将返回获取到的数据;如果为其传入了表示值的参数,表示设置操作,它将设置DOM元素指定属性的值。...如果该方法用于获取数据,返回null或undefined;如果该方法用于设置数据,忽略设置操作,并返回该空对象本身;如果该方法用于筛选元素,同样返回一个新的jQuery空对象。...$("selector").hide(); // 隐藏显示的元素,其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏隐藏就显示),其用法与

13.6K30

JS】1675- 4 个容易被忽略的 JavaScript API

当访问该属性时,如果页面是隐藏状态返回true,如果页面是可见状态返回false。 document.visibilityState:该属性是document.hidden更新后的版本。...首先,我将使用vite.js,它是一个快速启动新项目的神奇工具: npm create vite@latest unknown-web-apis 当被要求选择一个框架时,选择vanilla来创建一个vanillajavascript...为了看效果,我们将编写一个函数不间断地从quotable.io[3] API获取随机引用,并当页面隐藏时暂停该行为。首先,我们将在/index.html创建一个新的div标签来存储引用。.../yoshi.mp4" /> 回到/main.js,我们使用Fetch API[4]发起对quotable.io...Quote 前往/main.js从DOM中选择分享按钮。

21020

使用 Vanilla JavaScript 框架创建一个简单的天气应用

vanilla-js.com 官方网站是这样介绍的:Vanilla JS is a fast, lightweight, cross-platform framework for building incredible...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...我们先定义两个区域,第一个 section 区域,包含了应用名称、一个表单和一个提示信息文本。... autofocus 页面初始化时,输入焦点默认聚焦输入表单 你会注意到第二个 section 区域里,没有城市列表信息,这部分的结构,是通过JS代码动态生成的,基本结构如下...当屏幕在 (>700px and ≤1000px) 时,显示三列;当屏幕 (>500px and ≤700px) 时;显示两列;当屏幕 (≤500px) 时,显示一列。

1.5K20

OAuth 详解 什么是OAuth 2.0 隐式流, 已经不推荐了吗?

如果你要在源代码中包含一个秘密,任何使用该应用程序的人都可以在他们的浏览器中“查看源代码”并看到它。所以我们需要一个解决方案。 值得庆幸的是,这个问题已经解决了,因为同样的问题也适用于移动应用程序。... OAuth Authorization Code + PKCE in Vanilla JS <meta name="viewport" content="width...localStorage.removeItem("pkce_state"); localStorage.removeItem("pkce_code_verifier"); } 这段代码做了几件事: 检查授权服务器是否返回错误消息,如果显示给用户...如果您已经登录,您将立即被重定向,应用程序将获得访问令牌! 恭喜!您已经使用 vanilla JavaScript 在浏览器中成功实现了 PKCE!...您可以在此处找到完整的示例代码:pkce-vanilla-js 希望这对在浏览器中执行 PKCE 所需的内容有所帮助!

24040

p5.js 使用npm安装p5.js后如何使用?

不管是使用 Vue 还是 React,我们日常项目大部分应该都是使用脚手架的方式进行开发了,按照 《p5.js 光速入门》 的方式在 module 模式下使用 p5.js如果不出意外的话肯定会有意外...这里选择 Vanilla 创建一个原生项目 ? Select a framework: » - Use arrow-keys..... > Vanilla Vue React Preact Lit Svelte Others # 4、选择开发语言。...p5.js 版本,在写本文时所用的是 v1.5.0 此时如果你打算像 《p5.js 光速入门》 那样直接使用 setup() 创建画布是不可能的了,因为在 module 模式下引入的 p5.js 的...如果想将画布绑定在指定元素里,可以在 new p5() 方法里传入第二个参数,这个参数可以是元素的ID,也可以是元素本身。

2.6K10

每日分享html之2个悬停、2个加载、1个button

当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多...30px; border-radius: 15px; /* 阴影 */ box-shadow: 20px 20px 50px rgba(0,0,0,0.5); /* 溢出隐藏...backdrop-filter: blur(5px); } .container .card .content{ padding: 20px; text-align: center; /* 默认下移+隐藏...库:vanilla-tilt.js */ /* 我事先下载好了,需要这个JS库的可以找我拿 */ /* 看操作~ */ // vanilla-tilt.js是一个平滑的3D倾斜JS库,具体参数配置度娘可查到

1K20

Qwik带来简洁高效的Astro开发

在这时,我发现自己在普通 Vanilla JavaScript 和 React 之间难以抉择。 一方面,Vanilla JavaScript 通常比 React 更轻量,但维护起来可能会变得困难。...它足够智能到可以在服务器端(如果必要的话)执行,并在客户端恢复。Qwik 团队比我讲述得好多了,所以可以访问文档来了解更多信息: 思考 Qwik。...这个布尔值用于确定是否返回包含 Rocket 表情符号的 。它也用于在按钮中显示 “显示”或“隐藏”词。 你可以在下面的链接中看到这个 Qwik 组件的 src 代码和预览。...与 React 的 useState 不同,信号只包含值,不包含设置器对。 最后,注意 onClick 属性上的 trailing 。例如 onClick。...useVisibleTask 只在浏览器中执行,但如果您确实希望对服务器端数据获取使用类似的方法,Qwik 还有 useTask。

16810
领券