如何选择具有特定HTML内容匹配值的Divs?

如何选择具有特定html内容匹配值的divs?

The division tag is also known as the div tag. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc.). It is required to close the div tag, which has an opening (

) and closing (

) tag.

Div元素在网页开发中是最有用的,因为它允许我们将网页上的数据分割出来,并为不同类型的信息或功能创建特定的部分。

让我们看一下以下示例,以更好地理解如何选择具有与值匹配的特定HTML内容的div。

Example

的中文翻译为:

示例

In the following example we are running the script to select divs that has specific HTML content.

立即学习“前端免费学习笔记(深入)”;

                  .cricketers {            width: 100px;         }         .marked {            background-color: #27AE60 ;         }            
MSD
KOHLI
YUVI
SEHWAG
SACHIN
const visited = ["MSD"] const monElement = document.querySelector('.cricketers') for (let i = 0; i < monElement.children.length; i++) { let cricketers = monElement.children[i].textContent; 4. How To Select Divs That Has A Specific HTML Content That Matches Values for (let v of visited) { if (v == cricketers) { monElement.children[i].innerHTML += ' - selected'; monElement.children[i].classList.add("marked"); } } }

当脚本被执行时,它会生成一个由与div一起使用的名称组成的输出。其中一个文本会被用绿色突出显示,表示被选中的div。

Example

的中文翻译为:

示例

执行下面的代码并观察不同部分以不同的颜色被选择。

                  td[data-content="female"] {            color: #7D3C98;         }         td[data-content^="p" i] {            color: #239B56 ;         }         td[data-content*="8"] {            color: #DE3163;         }            
Jhon male 28
Sindhu female 18

运行上述脚本后,输出窗口将弹出,根据网页代码中提供的条件,以不同的颜色显示所选中的文本。

以上就是如何选择具有特定HTML内容匹配值的Divs?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551117.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:20:38
下一篇 2025年12月21日 21:20:43

相关推荐

  • 如何在HTML中的fieldset中包含一个标题?

    使用 标签来包含一个标题。HTML 标签用于为 标签定义一个标题。它支持以下属性− 属性 值 描述 Align 立即学习“前端免费学习笔记(深入)”; top bottom left right 已弃用 − 指定内容对齐方式。 示例 您可以尝试运行以下代码来实现HTML中的 标签− HTML leg…

    2025年12月21日
    000
  • 如何在HTML中创建一个有序列表,其中列表项使用小写罗马数字编号?

    列表是一组按顺序(通常是一个在另一个下面)写成的连接项。使用html,您可以创建两种类型的列表:无序列表和有序列表。 有序列表默认使用数字标记。您可以使用 标签创建有序列表,并使用定义列表项。 我们可以在HTML中创建4种有序列表 – type=”1″− 这将创建…

    2025年12月21日
    000
  • html行内元素和块级有哪些

    html行内元素和块级有:1、行内元素有a、span、strong、em、img、input、button、label等;2、块级元素有div、p、h1-h6、ul、ol、li、table、form等;3、既作为行内元素又作为块级元素的有a、span、img等当使用“display: block;”…

    2025年12月21日
    000
  • 我们如何在HTML中添加单行输入字段?

    使用标签添加单行输入字段。HTML 标签用于通过文本字段查询文档。该标签可以在任何地方使用,但最好放在head标签中。注意:这是一个已弃用的标签,不应该使用。 以下是属性列表 − 属性 值 描述 Prompt 立即学习“前端免费学习笔记(深入)”; 字符串 文本字段的标签 Action URL 在需…

    2025年12月21日
    000
  • 如何在HTML中使用月份输入类型?

    in html, a form comprises of various elements which helps in making a user interface in a web page. using which we can collect different nature of nat…

    2025年12月21日
    000
  • 如何在HTML中设置单元格内边距?

    我们使用内联样式属性,在HTML中设置单元格填充。单元格填充是表格的单元格边框与单元格内内容之间的空间。样式属性用于HTML的 标签内,使用CSS属性padding并指定像素值。 Syntax Following is the syntax to set cell padding in HTML. …

    2025年12月21日
    000
  • 行内元素和块级元素有哪些

    行内元素有div、p、h1-h6、ul、ol、li、table、form等;块级元素有span、a、img、strong、em、input、label等。两种元素的特点:1、行内元素,会独占一行,自动填充父容器的宽度,可以设置宽度、高度、内外边距等属性,可以包含其他块级元素和行内元素;2、行内元素,…

    2025年12月21日
    000
  • html全局属性是什么意思

    html全局属性是指可以应用于任何HTML元素的意思,具有普遍适用性,不受特定元素的限制,可以在任何HTML元素上使用,并且具有相同的语义和行为。其好处在于它们提供了一种通用的方式来控制和操作HTML元素,而无需为每个元素定义不同的属性。全局属性的使用可以提高代码的可维护性和可重用性,同时减少了代码…

    2025年12月21日
    000
  • 哪些属性不是html的全局属性

    不是HTML全局属性的常见属性有src、href、alt、colspan、rowspan、disabled、checked、required等等属性。详细介绍:1、src属性,用于指定图像、音频或视频等媒体文件的URL,通常用于img、audio和video等元素;2、href属性,用于指定链接的目…

    2025年12月21日
    000
  • 总结HTML中a标签的使用方法及跳转方式

    本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助! 1、a标签的跳转方式和使用方法 a元素最重要的属性是 href 属性,它指示链接的目标。 a标签的跳转方式有五种: 写法为 _blank表示跳到新页面打开,打开一个新窗口 _self表示当前页面打开链接 立即学习“前端免费学习笔记(深…

    好文分享 2025年12月21日
    000
  • 分享8个令人震惊的HTML技巧

    本篇文章给大家带来了关于html 的相关知识,其中主要跟大家分享8个html 技巧,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。 1. 捕获属性打开你的设备摄像头 正如 input 标记具有 email、 text 和 password 属性一样,还有一个属性可以打开移动设备的摄像头来捕捉图像…

    2025年12月21日
    000
  • html有哪些全局属性

    html全局属性有class、id、style、title、lang、accesskey、tabindex、hidden、draggable和editable等等。这些属性可以应用于任何HTML元素,全局属性是指可以被所有HTML元素使用的属性,无论是内联属性还是作为标签属性。 本教程操作系统:Wi…

    2025年12月21日
    000
  • html全局属性有什么作用

    html全局属性的作用:1、class属性为元素定义一个或多个样式类;2、id属性为元素定义一个唯一的标识符;3、style属性为元素定义内联样式;4、title属性为元素提供附加的提示;5、lang属性指定元素的语言;6、tabindex属性元素在页面中的焦点顺序;7、accesskey属性定义元…

    2025年12月21日
    000
  • 什么是html全局属性

    HTML全局属性是一组可以应用于HTML元素的属性,这些属性可以在所有HTML元素上使用。全局属性不仅可以用于控制元素的外观和行为,还可以提供元素的附加信息和功能,全局属性可以应用于任何HTML元素,无论是块级元素还是内联元素。无论是为了样式化元素、提供附加信息还是实现交互功能,全局属性都是非常有用…

    2025年12月21日
    000
  • html的全局属性是什么

    html的全局属性是指适用于所有HTML元素的属性,可以应用于任何HTML标签,以提供通用的功能和行为,可以为元素定义类名、唯一标识符、样式、附加信息语言、自定义数据、Tab键顺序、快捷键、可编辑性和拖动性等。这些全局属性使得HTML更具灵活性和可扩展性,可以满足各种不同的需求和应用场景。 本教程操…

    2025年12月21日
    000
  • html中怎么让列表横向排列

    html中让列表横向排列的方法:1、使用float属性,只需要给列表的li元素添加“float: left;”样式即可;2、使用display属性,只需要给列表的li元素添加“display: inline;”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5版…

    2025年12月21日 好文分享
    000
  • html如何给背景图片设置透明度

    html给背景图片设置透明度的方法:1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值;”样式即可;2、使用filter属性,给设置背景图片的元素添加“filter: opacity(透明度值);”样式即可。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月21日
    000
  • html的name和value是什么意思

    在html中,name的意思为“名称”,用于定义控件的名称,多个控件可以取同一个名称;而value的意思为“值”,用于定义控件的内容值。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 Html中value和name属性的作用及其使用介绍 name是控件的名称(多个控件可以…

    2025年12月21日
    000
  • HTML里怎么设置thead表头的颜色

    HTML中设置thead表头颜色的方法:1、使用“thead {color: 颜色值;}”语句设置表头的字体颜色;2、使用”thead {background:颜色值;}语句设置表头的背景颜色。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G…

    2025年12月21日 好文分享
    000
  • html下拉菜单文字怎么变小

    在html中,可以利用font-size属性来将下拉菜单的文字变小,该属性的作用就是设置字体的尺寸,只需要给下拉菜单元素添加“font-size: 数值px;”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 在html中建立一个下拉菜…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信