Jak – Przełącz klasę
Przełącz między dodawaniem i usuwaniem nazwy klasy z elementu za pomocą JavaScript.
Kliknij przycisk, aby przełączyć nazwę klasy!
Przełącz klasę
Krok 1) Dodaj kod HTML:
Przełączaj między dodawaniem nazwy klasy do elementu div z id="myDIV" (w tym przykładzie używamy przycisku do przełączania nazwy klasy).
Przykład
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Krok 2) Dodaj CSS:
Dodaj nazwę zajęć, aby włączyć:
Przykład
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Krok 3) Dodaj JavaScript:
Pobierz element <div> z id="myDIV" i przełącz się między klasą "mystyle":
Przykład
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Wskazówka: zobacz także Jak dodać klasę .
Wskazówka: zobacz także Jak usunąć klasę .
Wskazówka: Dowiedz się więcej o właściwości classList w naszej dokumentacji JavaScript.