Comment sélectionner des Divs avec des valeurs de correspondance de contenu HTML spécifiques ?-tutoriel HTML-php.cn

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

WBOY

Libérer： 2023-08-23 15:53:17

avant

1215 Les gens l'ont consulté

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

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>

Copier après la connexion

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>

Copier après la connexion

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!