classList.replace în JavaScript

element.classList.replace(claseVeche, clasaNoua)

Ce face classList.replace

classList.replace(vechi, nou) schimbă clasa vechi cu nou, păstrându-i poziția în listă. Dacă elementul nu are clasa veche, nu face nimic și returnează false.

Este o prescurtare pentru remove urmat de add, cu avantajul că nu adaugă clasa nouă când cea veche lipsește. Celelalte metode classList sunt pe pagina classList.

Parametri

Parametru	Descriere
clasaVeche	Clasa înlocuită.
clasaNoua	Clasa pusă în loc.

Ce returnează

true dacă s-a făcut înlocuirea, altfel false.

Exemple

Exemplul 1: Schimbarea stării unui mesaj

<p id="stare" class="mesaj in-asteptare">Se procesează...</p>

<script>
  const stare = document.getElementById("stare");
  console.log(stare.classList.replace("in-asteptare", "succes"));
  console.log(stare.className);
  console.log(stare.classList.replace("eroare", "succes"));
</script>

Rezultat în browser

true
mesaj succes
false

Greșeli frecvente

• Dai un nume de clasă cu spațiu ("btn mare") și primești InvalidCharacterError. Fiecare clasă se dă separat.

Comenzi înrudite

• classList: Adaugă, scoate sau comută clase CSS pe un element.
• getAttribute / setAttribute / removeAttribute: Citește, setează, șterge și verifică atributele HTML ale unui element.
• Element.matches: Verifică dacă un element se potrivește cu un selector CSS.