Maison > Article > interface Web > Comment sélectionner des Divs avec des valeurs de correspondance de contenu HTML spécifiques ?

Comment sélectionner des Divs avec des valeurs de correspondance de contenu HTML spécifiques ?

WBOYavant: 2023-08-23 15:53:171434parcourir

La balise division est également connue sous le nom de balise div. HTML utilise la balise div pour créer des divisions de contenu dans les pages Web telles que (texte, images, en-tête, pied de page, barre de navigation, etc.). div, qui a une balise d'ouverture (

) et de fermeture (

L'élément Div est le plus utile dans le développement Web car il nous permet de segmenter les données sur la page Web et de créer des sections spécifiques pour différents types d'informations ou de fonctionnalités.

Jetons un coup d'œil à l'exemple suivant pour mieux comprendre comment sélectionner des divs avec un contenu HTML spécifique qui correspond à une valeur.

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple suivant, nous exécutons le script pour sélectionner les divs ayant un contenu HTML spécifique.

<!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>

Lorsque le script est exécuté, il génère une sortie composée du nom utilisé avec le div. L'un des textes sera surligné en vert, indiquant le div sélectionné.

La traduction chinoise de

Exemple

est :

Exemple

Exécutez le code ci-dessous et regardez différentes pièces sélectionnées dans différentes couleurs.

<!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>

Après avoir exécuté le script ci-dessus, la fenêtre de sortie apparaîtra, affichant le texte sélectionné dans différentes couleurs selon les conditions fournies dans le code de la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html select

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment spécifier en HTML si le contenu d'un élément doit être traduit ?Article suivant：Comment spécifier en HTML si le contenu d'un élément doit être traduit ?

Articles Liés

Voir plus