ThiselementhastwoCSSclassesappliedtoit Verwendung von JavaScript − Vorausgesetzt, dass es ein p-Tag mit der ID „Absatz“ gibt, wollen wir um diese Klassen anzuwenden -
suchen

Heim >Web-Frontend >CSS-Tutorial >Wie wende ich zwei CSS-Klassen auf ein einzelnes Element an?

Wie wende ich zwei CSS-Klassen auf ein einzelnes Element an?

王林
王林nach vorne
2023-09-16 18:33:031140Durchsuche

如何将两个 CSS 类应用到单个元素？

Wir können mehrere CSS-Klassen auf ein einzelnes Element anwenden, indem wir das Klassenattribut verwenden und jede Klasse durch ein Leerzeichen trennen.

Methode

Es gibt zwei Möglichkeiten, zwei CSS-Klassen auf ein einzelnes Element anzuwenden -

  • Klassenattribute verwenden -

<div class="class1 class2">This element has two CSS classes applied to it</div>

  • Mit JavaScript −

Angenommen, es gibt ein p-Tag mit der ID „Absatz“, möchten wir diese Klassen anwenden -

<script>
   const paragraph = document.getElementById('paragraph');
   paragraph.classList.add('one');
   paragraph.classList.add('two');
</script>

Beispiel

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Classes</title>
   <style>
      .one {
         color: red;
      }
      .two {
         font-size: 24px;
      }
   </style>
</head>
   <body>
      <p class = "one two">Using Class Attribute</p>
      <p id = 'paragraph'>Using JavaScript</p>
      <script>
         const paragraph = document.getElementById('paragraph');
         paragraph.classList.add('one');
         paragraph.classList.add('two');
      </script> 
   </body>
</html>

Anleitung

  • Speichern Sie den obigen Code in einer Datei mit der Erweiterung .html.

  • Öffnen Sie die Datei in Ihrem Webbrowser.

Das obige ist der detaillierte Inhalt vonWie wende ich zwei CSS-Klassen auf ein einzelnes Element an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html class
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Welchen Nutzen haben die Eigenschaften vor dem Sternchen in CSS?Nächster Artikel：Welchen Nutzen haben die Eigenschaften vor dem Sternchen in CSS?

In Verbindung stehende Artikel

Mehr sehen