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:

element.classList

- 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');

<<-Creare scripturi avansate Javascript .. -- Definire si Utilizare Clase ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicati functia PHP care returneaza numarul de caractere dintr-un sir.

mb_strlen() count() stristr()

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

Clic pe raspunsul potrivit la intrebarea: "When it happened?".

On the 7th of July 1996 It is a quarter to 5. Nice weather.

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".

Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.