Heim >Web-Frontend >HTML-Tutorial >Wie wähle ich Divs mit bestimmten HTML-Inhaltsübereinstimmungswerten aus?

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

WBOYnach vorne: 2023-08-23 15:53:171469Durchsuche

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>

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>

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!

html select

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie legt man in HTML fest, ob der Inhalt eines Elements übersetzt werden soll?Nächster Artikel：Wie legt man in HTML fest, ob der Inhalt eines Elements übersetzt werden soll?

In Verbindung stehende Artikel

Mehr sehen