Atributul HTML class. Clase multiple. Etichetele diferite ce pot împărtăși aceeași clasă: h2, p. Utilizarea atributului class în JavaScript: getElementsByClassName ()

Clase multiple

Elementele HTML pot avea mai mult de un nume de clasă, fiecare nume de clasă trebuie separat printr-un spațiu.

Exemplu:

Elemente de stil cu numele clasei „city”, de asemenea elemente de stil cu numele clasei „main”:
 

<h2 class="city main">Londra</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

În exemplul de mai sus, primul element <h2> aparține atât clasei „city”, cât și clasei „main”.

Etichetele diferite pot împărtăși aceeași clasă

Etichetele diferite, cum ar fi <h2> și <p>, pot avea același nume de clasă și, prin urmare, au același stil:

Exemplu:

<h2 class="city">Paris</h2>
<p class="city">Paris este capitala Franței</p>

Utilizarea atributului class în JavaScript

Numele clasei poate fi folosit și de JavaScript pentru a efectua anumite sarcini pentru elemente cu numele clasei specificat.
JavaScript poate accesa elemente cu un nume de clasă specificat folosind metoda getElementsByClassName ():

Exemplu:

Când un utilizator face click pe un buton, ascundeți toate elementele cu numele clasei „city”:
 

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>