Wir können mehrere CSS-Klassen auf ein einzelnes Element anwenden, indem wir das Klassenattribut verwenden und jede Klasse durch ein Leerzeichen trennen.
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>
<!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>
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!
So verwenden Sie DataReader
Lösung zur Aufteilung der Worttabelle in zwei Seiten
Einführung in Screenshot-Tastenkombinationen in Win8
Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird?
Einführung in die Verwendung von Rowid in Oracle
Detaillierte Erläuterung der Nginx-Konfiguration
So lösen Sie verstümmelten SecureCRT-Code
Warum kann Swoole im Speicher verbleiben?
