Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?-html tutorial-php.cn

Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?

WBOY

Lepaskan： 2023-08-23 15:53:17

ke hadapan

1441 orang telah melayarinya

Bagaimana untuk memilih Div dengan nilai padanan kandungan HTML tertentu?

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 (

) dan penutup (

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 bagi

Contoh

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>

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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!