开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当一个div包含特定文本时，如何隐藏另一个div？

当一个div包含特定文本时，可以使用JavaScript来隐藏另一个div。以下是一种实现方式：

首先，给包含特定文本的div添加一个唯一的id属性，例如id="div1"。
给需要隐藏的div添加一个唯一的id属性，例如id="div2"。
使用JavaScript获取包含特定文本的div和需要隐藏的div的引用。
使用条件语句判断包含特定文本的div的textContent或innerText是否包含目标文本。
如果包含目标文本，则将需要隐藏的div的style.display属性设置为"none"，即隐藏该div；否则，将其设置为其他值，如"block"，以显示该div。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hide Div Example</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .hidden-div {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        This is the div containing specific text.
    </div>
    <div id="div2" class="hidden-div">
        This is the div to be hidden.
    </div>

    <script>
        // 获取div的引用
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");

        // 判断div1的文本内容是否包含特定文本
        if (div1.textContent.includes("specific text")) {
            div2.style.display = "none"; // 隐藏div2
        } else {
            div2.style.display = "block"; // 显示div2
        }
    </script>
</body>
</html>

在上述示例中，当div1的文本内容包含"specific text"时，div2将被隐藏。你可以根据实际情况修改特定文本和样式。

相关搜索:仅当iframe包含特定文本时才显示div 单击另一个div时隐藏/显示DIV 如何删除包含特定文本的div 如何在单击另一个div时隐藏div 如何根据文本隐藏Div 如何隐藏一个div并显示同一个div中包含的另一个div？如果另一个div包含jQuery中的特定字符串，则隐藏该div 如果另一个div包含某些文本，则隐藏div 如果较低的DIV包含特定文本，则将div隐藏在另一个div之上的几个级别当div受到父级溢出的影响时隐藏div:隐藏；

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

Demo 1.2 用CSS隐藏图片可以用CSS隐藏图片，但是它仍然会被加载到页面中。因此，在执行此操作时请小心，如果一个图片应该被隐藏，那么它可能是出于装饰的目的。...虽然另一个折叠了，以适应其空的 alt 属性的内容，但由于它的边框，导致了它作为一个小点出现。但是，当存在 alt 属性值时，它将如下所示： ? 这不是很好的反馈吗？...另外，当图片源发生故障时，可以向其中添加伪元素。 1.4 响应式图片 ? 的优点在于，可以针对特定视口大小将其扩展为具有多个版本的图片。例如，这可用于商品图片。...CSS背景图片当使用CSS背景显示图片时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图片的主要用途应该是用于装饰目的。 2.1 如何使用CSS背景图片简单来说，我们需要一个元素。...悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用内联SVG。

5.6K2 0

jQuery中常用的函数和属性详细解析

( callback ) 当所有的AJAX都停止时，执行一个函数。...这是一个Ajax事件当所有AJAX请求都停止时，隐藏loading信息。...这是一个Ajax事件当AJAX请求成功完成时，显示信息。...animate( params, options ) 创建自定义动画的另一个方法。作用同上。...children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。

2.5K1 0

前端入门学习--CSS

p.center{text-align:center;} CSS 创建当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。...如何插入样式表插入样式表的方法有三种：外部样式表内部样式表内联样式外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。...内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。...请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

27.6K2 0

JQuery最全常用方法指南

，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。...; ajaxStop(callback) 当所有的AJAX都停止时，执行一个函数。...这是一个Ajax事件当所有AJAX请求都停止时，隐藏loading信息。...这是一个Ajax事件当AJAX请求成功完成时，显示信息。...children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。

10.9K3 1

python测试开发django-188.Bootstrap折叠（Collapse）插件

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。...单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容 <!...接受一个可选选项object。...事件类型描述 show.bs.collapse show调用实例方法时立即触发此事件。 shown.bs.collapse 当折叠元素对用户可见时触发此事件（将等待 CSS 转换完成）。...hide.bs.collapse hide调用该方法时立即触发此事件。 hidden.bs.collapse 当对用户隐藏折叠元素时会触发此事件（将等待 CSS 转换完成）。

2.9K5 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

map(callback)，将一组元素转换成其他数组（不论是否是元素数组） has(expr|ele)，保留包含特定后代的元素，去掉那些不含有指定后代的元素。...parent([expr]),取得一个包含着所有匹配元素的唯一父元素的元素集合 parents([expr]),取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。...prev([expr]),取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。...，fn) 显示当显示成功后触发fn hide()隐藏 toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...跨域：在一个服务器上，去访问另一个服务器 jQuery如何实现跨域请求？使用JSONP形式实现跨域。 javascript如果调用另一个域程序，不能执行当前域js函数。

8.2K2 0

移除jQuery好像也没那么难

jQuery 是一个非常实用且实用的库，但随着浏览器对 ES6 的广泛支持（截至撰写本文时超过 96%），现在可能是时候从 jQuery 过渡到原生 JavaScript 了。...我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。选择元素选择一个或多个 DOM 元素是 jQuery 最基本的功能之一。...(".box").forEach(box => { box.style.display = "none" }); 在一个元素内找到另一个元素一个常见的 jQuery 模式是使用 .find() 选择一个元素内的另一个元素...(".button").textContent; // 返回 "新文本" 要创建一个新元素并将其添加到另一个元素中，可以使用 appendChild() 方法： // 创建 div 元素并附加到 .container...("div"); document.querySelector(".container").appendChild(element); 综合起来，下面是如何创建一个 div 元素，更新其文本和类名，并将其添加到

901 0

使用这些 CSS 属性选择器来提高前端开发效率！

在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。...通常将 HTML 属性放在方括号中，称为属性选择器，如下： [href] { color: red; } 这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。...input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; } 显示电话链接你可以隐藏特定尺寸的电话号码并显示电话链接...没有 controls 属性的 audio 我不经常使用audio标签，但是当我使用它时，我经常忘记包含controls属性。结果：没有显示任何内容。...只需查看页面就很难找到它们，但如果添加它们，它们就会弹出来（当页面图片加载失败时，alt文字可以更好的解释图片的作用）： img:not([alt]) { /* no alt attribute */

2.2K5 0

前端知识点总结（html+css）（上）

常见块级元素、行内元素、行内块元素的特点和区别块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%；可以设置高度宽度内外边距块级元素可以包含其他的块级元素和文本...（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...title属性可以实现鼠标悬停时提示的内容 css篇学习css重点就是清楚的了解布局，给你一个页面，你能一眼知道这个页面如何布局。...隐藏超出范围的文本） 11....与em对应的另一个长度单位是rem，是指相对于根元素（通常是HTML元素）字体的大小。

2671 0

23 个初级 Vue.js 面试题

在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。...下面是一个可以反转文本字符串的过滤器示例：模板 {{ title | reverseText }} App new Vue({ el: '#app',...绑定 HTML 类时，该如何连接类？假设存在一个元素：Process。我们只希望使用名为 “isActive” 的数据属性动态地切换 btnActive 类。这可以在绑定类时用 Array 来实现。...需要注意的是，仅当方法中使用的属性是响应性的（例如数据属性）时，才考虑依赖关系的更改。...观察者允许我们观察更改的特定属性，并执行定义为函数的自定义操作。尽管它们的用例与计算的属性相交叉，但是当某些数据属性发生改变时，有时需要观察者执行自定义操作或运行代价昂贵的操作。 24.

4.7K1 0

前端开发需要知道的一些 CSS 属性选择器！

在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。...通常将 HTML 属性放在方括号中，称为属性选择器，如下： [href] { color: red; } 这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。...input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; } 显示电话链接你可以隐藏特定尺寸的电话号码并显示电话链接...没有 controls 属性的 audio 我不经常使用audio标签，但是当我使用它时，我经常忘记包含controls属性。结果：没有显示任何内容。...只需查看页面就很难找到它们，但如果添加它们，它们就会弹出来（当页面图片加载失败时，alt文字可以更好的解释图片的作用）： img:not([alt]) { /* no alt attribute */

1.7K2 0

CSS技术入门

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !...由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。...display 属性设置一个元素应如何显示，visibility 属性指定一个元素应可见还是隐藏。...Float（浮动），往往是用于图像，但它在布局时一样非常有用。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。...IE8 和早期有一个问题，当使用 float 属性时。如果一个容器元素（在本例中）指定的宽度，!

2.8K6 1

web 图像技术：前端引入图片的各种方式及其优缺点

通过 CSS 隐藏图像图像可以用 CSS 隐藏。但是，它仍将加载在页面中。因此，在执行此操作时请小心。如果一个图像应该被隐藏，那么它可能是出于装饰的目的。...而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。但是，当alt属性有值，它看起来是这样的： ? 这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。...考虑以下示例： .element { background: url('cool-1.jpg'), url('cool-2.jpg'); } 隐藏图像我们可以在特定视口中隐藏和显示图像，如果未使用...解决方案1 通过使用多个CSS背景，我们可以将一个背景作为叠加层，将另一个背景作为实际图像。...我们有一个简单的logo ，其中包含形状和文字。悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用嵌入式SVG。

4.9K2 0

jQuery 教程

/ 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素...click() click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。...在下面的实例中，当点击事件在某个元素上触发时，隐藏当前的元素： $("p").click(function(){ $(this).hide(); }); dblclick() 当双击元素时...; } ); focus() 当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。...该处理程序只能被每个元素触发一次 $.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数 ready() 规定当 DOM 完全加载时要执行的函数 resize() 添加/触发 resize

17K2 0

要提升前端布局能力，这些 CSS 属性需要学习下！

在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。...通常将 HTML 属性放在方括号中，称为属性选择器，如下： [href] { color: red; } 这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。...input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; } 显示电话链接你可以隐藏特定尺寸的电话号码并显示电话链接...没有 controls 属性的 audio 我不经常使用audio标签，但是当我使用它时，我经常忘记包含controls属性。结果：没有显示任何内容。...只需查看页面就很难找到它们，但如果添加它们，它们就会弹出来（当页面图片加载失败时，alt文字可以更好的解释图片的作用）： img:not([alt]) { /* no alt attribute */

1.5K3 0

详细介绍 AngularJS 表单的各种特性、用法和最佳实践

表单控件的类型input：文本框，用于输入文本、数字等。textarea：多行文本框，用于输入长文本。select：下拉列表，用于选择其中一个选项。checkbox：复选框，用于选择一个或多个选项。... 在上述示例中，我们定义了一个表单，并包含了一个必填的用户名输入框。...条件显示/隐藏字段可以使用 AngularJS 的指令 ng-show 和 ng-hide 来根据特定条件动态显示或隐藏表单字段。...showField">提交在上述示例中，我们定义了一个复选框来控制一个文本输入框的显示和隐藏，同时根据该复选框的状态来禁用或启用提交按钮。4....表单提交使用 ng-submit 指令可以定义在提交表单时要执行的函数。表单重置使用 ng-click 指令可以定义在按钮点击时重置表单的函数。

1763 0

深入理解Shadow DOM v1

DOM将网页视为树结构，每个分支以节点结束，每个节点包含一个对象，可以使用JavaScript等脚本语言对其进行修改。...嵌套标签形成一个元素树。元素中的文本称为文本节点。文本节点可能没有子节点，你可以把它想象成是一棵树的叶子。为了访问树，DOM提供了一组方法，程序员可以用这些方法修改文档的内容和结构。...下面的JavaScript代码显示了如何使用DOM方法创建两个HTML元素，将一个嵌套在另一个内部并设置文本内容，最后把它们附加到文档正文： 1const section = document.createElement...你可能会收到DOMException错误的另一个原因是浏览器已经用该元素托管了shadow DOM。...当你在HTML中使用元素时，浏览器会自动将shadow DOM附加到包含默认浏览器控件的元素。但DOM中唯一可见的是元素本身： ?

1.1K2 0

如何在 React 中实现鼠标悬停显示文本？

示例代码下面是一个示例代码，演示了如何使用状态管理实现鼠标悬停显示文本的功能：import React, { useState } from 'react';const HoverText = () =...悬停在我上面显示文本 {isHovered && 这是悬停时显示的文本} );};export default HoverText...当鼠标悬停在元素上时，isHovered 状态为 true，此时显示文本；鼠标离开元素时，isHovered 状态为 false，文本隐藏。...它提供了一个简单而灵活的方式，在鼠标悬停时显示文本提示。...使用 react-popper-tooltipreact-popper-tooltip 是另一个用于创建工具提示的 React 库。

2.9K1 0

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

min-width、max-width、width的包含(优先级)关系 display属性值及作用如何消除inline-block元素或图片之间的空白间隙？...当浏览器放大导致元素的宽度大于 max-width 时，元素的 width 就会被 max-width 值取代。...当 min-width 值大于 max-width 时，则以 min-width 值为准。...30px*/ 我是用来测试伪元素的作用伪类：将特殊的效果添加到特定选择器上。...; } ② 多行文本省略代码 div { overflow: hidden; /*超出部分隐藏，只有设置了这个属性，text-overflow:ellipsis才生效*/ text-overflow:

1.7K0 0

AngularDart4.0 指南- 表单顶

本页面向您展示了如何从头构建一个简单的表单。一路上你将学习如何：用组件和模板构建一个Angular表单。使用ngModel创建读取和写入输入控制值的双向数据绑定。...样式控件有效的控制属性是最有趣的，因为当一个控制值无效时，你想发送一个强烈的视觉信号。要创建这样的视觉反馈，您将使用Bootstrap自定义表单类 is-valid和is-invalid。...临时将另一个名为spy的模板引用变量添加到Name 标记，并使用它显示输入的CSS类。...当控件是“原始的”时隐藏消息实现了这个目标。当您向表单添加一个“清除”按钮时，您会看到此选项的重要性。英雄Alter Ego是可选的，所以你可以不用关那个。英雄power选择是必需的。...该视图包含一个编辑按钮，其单击事件绑定将清除提交的标志。当您单击编辑按钮时，该表消失，并且可编辑的表单重新出现。概要 Angular表单为数据修改，验证等提供支持。

17.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭