Wie wähle ich Divs mit bestimmten HTML-Inhaltsübereinstimmungswerten aus?-HTML-Tutorial-php.cn

Wie wähle ich Divs mit bestimmten HTML-Inhaltsübereinstimmungswerten aus?

WBOY

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

nach vorne

1470 Leute haben es durchsucht

Wie wähle ich Divs mit bestimmten HTML-Inhaltsübereinstimmungswerten aus?

Das Division-Tag wird auch als div-Tag bezeichnet. HTML verwendet das div-Tag, um Inhaltsunterteilungen in Webseiten wie (Text, Bilder, Kopfzeile, Fußzeile, Navigationsleiste usw.) zu erstellen div-Tag, das ein öffnendes (

) und ein schließendes (

) Tag hat. Das

Div-Element ist in der Webentwicklung am nützlichsten, da es uns ermöglicht, die Daten auf der Webseite zu segmentieren und spezifische Abschnitte für verschiedene Arten von Informationen oder Funktionen zu erstellen.

Sehen wir uns das folgende Beispiel an, um besser zu verstehen, wie man Divs mit spezifischem HTML-Inhalt auswählt, der einem Wert entspricht.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Im folgenden Beispiel führen wir das Skript aus, um Divs auszuwählen, die bestimmte HTML-Inhalte haben.

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

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die aus dem mit dem div verwendeten Namen besteht. Einer der Texte wird grün hervorgehoben und zeigt den ausgewählten Abschnitt an.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Führen Sie den folgenden Code aus und beobachten Sie, wie verschiedene Teile in verschiedenen Farben ausgewählt werden.

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

Nach dem Login kopieren

Nachdem Sie das obige Skript ausgeführt haben, wird das Ausgabefenster angezeigt, in dem der ausgewählte Text entsprechend den im Webseitencode bereitgestellten Bedingungen in verschiedenen Farben angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie wähle ich Divs mit bestimmten HTML-Inhaltsübereinstimmungswerten aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!