資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
廣告