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:031131Durchsuche
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!