Rumah > Artikel > hujung hadapan web > Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?
Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?
- WBOYke hadapan
- 2023-08-23 15:53:171427semak imbas
Teg bahagian juga dikenali sebagai teg div menggunakan teg div untuk membuat bahagian kandungan dalam halaman web seperti (teks, imej, pengepala, pengaki, bar navigasi, dll.). teg div, yang mempunyai teg pembukaan (
Elemen Div adalah yang paling berguna dalam pembangunan web kerana ia membolehkan kami membahagikan data pada halaman web dan membuat bahagian khusus untuk jenis maklumat atau fungsi yang berbeza.
Mari kita lihat contoh berikut untuk lebih memahami cara memilih div dengan kandungan HTML tertentu yang sepadan dengan nilai.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Dalam contoh berikut, kami menjalankan skrip untuk memilih div yang mempunyai kandungan HTML tertentu.
<!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>
Apabila skrip dilaksanakan, ia menghasilkan output yang terdiri daripada nama yang digunakan dengan div. Salah satu teks akan diserlahkan dalam warna hijau, menunjukkan div yang dipilih.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Lakukan kod di bawah dan tonton bahagian yang berbeza dipilih dalam warna yang berbeza.
<!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>
Selepas menjalankan skrip di atas, tetingkap output akan muncul, memaparkan teks yang dipilih dalam warna yang berbeza mengikut syarat yang disediakan dalam kod halaman web.
Atas ialah kandungan terperinci Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!