Miten vaihtaa luokkaa

Vaihda luokkaa

Vaihe 1 - Lisää HTML:

Lisää luokan nimeä id="myDIV" vaihda div-elementtien välillä (tässä esimerkissä käytämme painiketta luokan nimen vaihtamiseen).

<button onclick="myFunction()">Kokeile</button>
<div id="myDIV">
  Tämä on DIV-elementti.
</div>

Vaihe 2 - Lisää CSS:

Lisää luokan nimi vaihtamista varten:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: koralli;
  color: white;
  font-size: 25px;
}

Vaihe 3 - Lisää JavaScript:

hanki id="myDIV" div-elementtiä, ja "mystyle" Vaihda luokkien välillä:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Kokeile itse

Liittyvät sivut

Opas:Kuinka lisätä luokan

Opas:Kuinka poistaa luokan

Viittauskirja:HTML DOM Element classList ominaisuus