Jak na to - Přepnout třídu
Přepínání mezi přidáním a odebráním názvu třídy z prvku pomocí JavaScriptu.
Kliknutím na tlačítko přepnete název třídy!
Přepnout třídu
Krok 1) Přidejte HTML:
Přepínejte mezi přidáním názvu třídy do prvku div pomocí id="myDIV" (v tomto příkladu používáme tlačítko pro přepínání názvu třídy).
Příklad
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Krok 2) Přidejte CSS:
Chcete-li přepnout, přidejte název třídy:
Příklad
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Krok 3) Přidejte JavaScript:
Získejte prvek <div> s id="myDIV" a přepínejte mezi třídou "mystyle":
Příklad
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Tip: Viz také Jak přidat třídu .
Tip: Viz také Jak odebrat třídu .
Tip: Další informace o vlastnosti classList naleznete v naší příručce JavaScript.