classList - Lucru cu clase css

classList e o proprietate JavaScript prin case se poate lucra cu clase CSS la elementele HTML, utila pentru a adauga, elimina, inlocui si comuta clase CSS la elemente HTML. Contine un obiect-lista a atributului class.
Sintaxa:

- Daca atributul 'class' nu e setat, sau e gol, codul: element.classList.length returneaza 0.

Metode classList

Obiectul continut de proprietatea classList are aceste metode:

• add(class1, class2, ..) - adauga unul sau mai multe clase la un element. Daca clasa specificata exista deja, nu va fi adaugata.
• contains(class) - Pentru a verifica daca un element contine sau nu o anumita clasa css. Returneaza True daca elementul contine numele de clasa specificat; altfel, False.
• item(index) - returneaza numele clasei cu numarul de index specificat (indexul incepe de la 0) sau Null daca indicele specificat este in afara intervalului.
• remove(class1, class2, ..) - elimina unul sau mai multe clase css dintr-un element.
• replace(oldClass, newClass) - inlocuieste o clasa existenta cu alta noua.
• toggle(class, [true|false]) - Cand e adaugat un singur argument, comuta acea clasa. Daca exista deja, o sterge si returneaza false, daca nu exista, o adauga si returneaza true.
  Al doilea parametru e optional (true sau false) forteaza clasa sa fie adaugata sau eliminata, indiferent daca aceasta exista deja sau nu.
  De exemplu:
  - Elimina o clasa:

  element.classList.toggle('classToRemove', false);

  - Adauga o clasa:

  element.classList.toggle('classToAdd', true);

Exemple cu classList

1. Adauga doua clase css la un <div>:

var div1 = document.getElementById('div1');
div1.classList.add('cls_1', 'cls_2');

2. Elimina o clasa css de la un <div>:

var div1 = document.getElementById('div1');
div1.classList.remove('cls_2');

3. Verifica daca un <div> contine sau nu o anumita clasa css:

var div1 = document.getElementById('div1');
if(div1.classList.contains('cls_1')) alert('.cls_1 in #div1');
else alert('.cls_1 not in #div1');

4. Inlocuieste clasa 'foo' cu 'bar':

var div1 = document.getElementById('div1');
div1.classList.replace('foo', 'bar');

5. Daca 'visible' e setat, il elimina; altfel, il adauga:

var div1 = document.getElementById('div1');
div1.classList.toggle('visible');

<div style="width: 80%; border: 3px solid #888888;">Continut</div>

#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}

var rightnow = new Date();
alert( rightnow.toString() );

$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}

On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.

Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.