数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何选择包含特定 HTML 内容且与值匹配的 Div？
division 标签也称为 div 标签。HTML 使用 div 标签在网页中创建内容分区，例如文本、图像、标题、页脚、导航栏等。需要关闭 div 标签，它有一个开始标签 (<div>) 和一个结束标签 (</div>)。
Div 元素在 Web 开发中非常有用，因为它允许我们将网页上的数据划分出来，并为不同类型的信息或功能创建特定的部分。
让我们看看以下示例，以更好地了解如何选择包含特定 HTML 内容且与值匹配的 div。
示例
在以下示例中，我们正在运行脚本以选择包含特定 HTML 内容的 div。
<!DOCTYPE html>
<html>
<body>
<style>
.cricketers {
width: 100px;
}
.marked {
background-color: #27AE60 ;
}
</style>
<div class="cricketers">
<div>MSD</div>
<div> KOHLI </div>
<div> YUVI </div>
<div> SEHWAG </div>
<div> SACHIN </div>
</div>
<script>
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");
}
}
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含与 div 一起使用的名称的输出。在这些文本中，有一个以绿色突出显示，表示已选择该 div。
示例
执行以下代码并观察不同部分如何以不同的颜色进行选择。
<!DOCTYPE html>
<html>
<body>
<style>
td[data-content="female"] {
color: #7D3C98;
}
td[data-content^="p" i] {
color: #239B56 ;
}
td[data-content*="8"] {
color: #DE3163;
}
</style>
<div>
<table>
<tr>
<td data-content="Jhon">Jhon</td>
<td data-content="male">male</td>
<td data-content="28">28</td>
</tr>
<tr>
<td data-content="Sindhu">Sindhu</td>
<td data-content="female">female</td>
<td data-content="18">18</td>
</tr>
</table>
</div>
</body>
</html>
运行上述脚本后，将弹出输出窗口，显示以不同颜色选择的文本，具体取决于网页上代码中提供的条件。
更新于： 2023年4月20日
73 次查看
广告