Snippet

Bedingte Klassen mit class:name

Die class:name-Direktive bietet eine saubere Möglichkeit, CSS-Klassen basierend auf einer Bedingung umzuschalten. Wenn der Ausdruck in den Klammern 'truthy' ist, wird die Klasse hinzugefügt; andernfalls wird sie entfernt.

snippet.js

javascript

<script>
  let active = false;
</script>
 
<button 
  class:active={active} 
  on:click={() => active = !active}
>
  Toggle Status
</button>
 
<style>
  .active { color: red; font-weight: bold; }
</style>

svelte

Erklärung

class:active={active}

Wendet die CSS-Klasse 'active' nur an, wenn die Variable 'active' wahr ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Bedingte Klassen mit class:name

Verwandt