Tema 4

Stilizarea conținutului paginii

Cu siguranță că atunci când ați completat un formular online, ați observat ce se întâmplă în
cazul când a fost introdusă informația eronată, sau că stilul bordurii era oarecum diferit.
Aceste modificări sunt efectuate cu JavaScript și DOM, iar noi vom studia cum să controlăm
afișarea unei pagini utilizând următoarele proprietăți și metode:
- .style.<prop>
- .cssText
- .setAttribute()
- .className
- .classList
Înainte de a începe, puneți în ordinea corectă a specificității și importanței CSS. Puneți
opțiunea cel mai puțin specifică în partea de sus și cea mai specifică opțiune în partea de jos.

3,1,2

Specificitatea CSS
Pentru a avea succes în această secțiune, vă va ajuta să înțelegeți cum funcționează
specificitatea CSS. Conform MDN, „specificitatea” este:
- mijloacele prin care browserele decid ce valori ale proprietății CSS sunt cele mai
relevante pentru un element și, prin urmare, vor fi aplicate.
Practic, cu cât regula stilului este mai aproape de un element, cu atât este mai specifică. De
exemplu, o regulă dintr-un atribut de stil pe un element va suprascrie o regulă de stil pentru
acel element într-o foaie de stil CSS. Există, de asemenea, specificitatea tipului de selector
utilizat. Un _ID_ este mai specific decât o clasă .
 Dacă doriți să aflați mai multe despre specificitatea CSS, consultați următoarele
linkuri: Specificitate pe MDN
Modificarea atributului de stil al unui element
Să ne întoarcem la cunoștințele dvs. despre CSS. Când încercați să stilizați un element,
regulile cele mai specifice pe care le puteți scrie pentru un element sunt scrise în atributul
style acelui element. Din fericire pentru noi, putem accesa atributul style unui element
folosind proprietatea .style!

Acum, vreau să subliniez că atunci când utilizați proprietatea .style, puteți modifica doar un
singur stil CSS la un moment dat. De aceea, codul anterior are .style.color = 'red' și nu doar
.style = 'red'.
Consultați pagina de documentație pentru mai multe informații: documente de stil

Putem observa din imaginea de sus, ca dupa ce am facut modificarile in consola, din foaia de
stiluri au fost anulate color si fontSize, si li s-au atribuit valorile specificate in consola, adica
JavaScript ne permite sa manipulam cu stilurile elementelor afisate in pagina, utilizand
consola si metodele si proprietatile JavaScript.
Pentru inca un exemplu, urmati: https://www.youtube.com/watch?
time_continue=1&v=YvCtuOUMSkE&feature=emb_logo
De ce credeti că trebuie să fie fontSize? De ce font-size nu ar funcționa?

Exercitiu
Setati latimea fontului la 50%.
antetMeu.style.fontWeight=’50’;';

Adăugarea mai multor stiluri simultan

Am văzut cum sintaxa .style. <property> ne va permite să schimbăm doar o piesă de stil
pentru un element. Deci, dacă am dori să setăm culoarea, latimea fontului si tipul fontului
unui element, ar trebui să folosim trei linii separate de cod:

și asta doar pentru setarea a trei stiluri. Imaginați-vă dacă am avea nevoie de 15 sau 20 de
stiluri diferite! Deci, sintaxa .style.property este perfectă pentru setarea unui stil la un
moment dat, dar nu este excelentă pentru controlul stilurilor multiple.

Din fericire, putem folosi proprietatea .style.cssText pentru a seta mai multe stiluri CSS
simultan!

Observați că atunci când utilizați proprietatea .style.cssText, scrieți stilurile CSS la fel cum
ați face într-o foaie de stil; deci scrii font-size mai degrabă decât fontSize. Acest lucru este
diferit de utilizarea modului individual .style.<property>.
Intrebare

Doar latime

Setarea atributelor unui element

O altă modalitate de stiluri stabilite pentru un element este să ocolesc proprietățile
.style.<property> și .style.cssText cu totul și de a folosi metoda .setAttribute():

Consultați pagina de documentație pentru mai multe informații: documente de stil

.setAttribute() nu este doar pentru styling
Metoda setAttribute() nu este doar pentru stilizarea elementelor de pagină. Puteți utiliza
această metodă pentru a seta orice atribut pentru un element. Dacă doriți să dați unui element
un ID, puteți face acest lucru !:
nextElementSibling va atribui un ID urmatorului element frate pentru elementul stocat de noi
in constanta antetMeu. Iar ulterior il vom putea stiliza si pe el, la fel cum este specificat in
codul de mai sus.
De altfel, am putea si sa omitem atribuirea unui ID, si sa stilizam direct elementul frate
imediat urmator.

... dar acest lucru a fost doar pentru a demonstra că este posibil să setați un atribut cu
JavaScript care afectează DOM, care poate fi folosit imediat. Dar tendin’ele actuale in
programare web se bazeaza mai degraba pe separarea specificatiilor, astfel ca:
- Tot ce tine de crearea elementelor HTML este necesar de a plasa in fisiere HTML
- Tot ceea ce tine de stilizare in fisiere externe css
- Si tot ceea ce tine de interactivitate in fisiere JavaScript.
Nu este recomandabil de a face un mix din toate acestea. Si ar fi oarecum nu chiar corect de a
pune stilizarea CSS in fisierele JavaScript. Totusi in practica, este necesar uneori de a
combina.
Ca de exemplu, o clasa este adaugata in fisierul HTML, care va adauga stilizare acelui
element, iar noi putem cauta cu DOM, clasa ce utilizeaza JavaScript, sa vedem controlul
JavaScript asupra unui element. Urmeaza in continuare...

Accesarea claselor unui element

Primul element de proprietate pe care îl vom analiza este proprietatea .className. Această
proprietate returnează un șir din toate clasele elementului. Dacă un element are următorul
HTML:
<div id="Bloc_principal"class="hero acces">

Am putea folosi .className pentru a accesa lista de clase:

// atribuim unei constante elementul cu un oarecare ID:

// atribuim unei constante numarul de clase din divMain utilizand metoda .className:

// afisam la ecran clasele elementului cu ID-ul #Bloc_principal

Proprietatea .className returnează un șir separat prin spațiu al claselor. Din păcate, acesta nu
este cel mai ideal format. Cu toate acestea, putem converti acest șir separat de spațiu într-o
matrice folosind metoda șirului JavaScript .split():

Acum, că avem o serie de clase, putem face orice calcul intensiv în date:
- Utilizam un ciclu for(), pentru a parcurge lista cu numele claselor
- Utilizam metoda .push(), pentru a adăuga un element la listă
- Utilizam metoda .pop(), pentru a elimina un element din listă

.className este o proprietate, deci îi putem seta valoarea doar atribuind un șir proprietății:

Codul de mai sus șterge orice clase care erau inițial în atributul class elementului și îl
înlocuiește cu clasa unică clasa-noua.
Deoarece .className returnează un șir, este dificil să adăugați sau să eliminați clase
individuale. După cum am menționat mai devreme, putem converti șirul într-o matrice și apoi
să folosim diferite metode Array pentru a căuta o clasă, scoateți-o din listă și apoi actualizați-
o .className cu celelalte clase. Cu toate acestea, nu vrem să facem toate aceste lucrări!
Să folosim deci proprietatea mai nouă .classList.

Proprietatea .classList
Proprietatea .classList este mai nou decât proprietatea .className, dar este si mult mai
comod.
Proprietatea .classList are un număr de proprietăți proprii. Unele dintre cele mai utilizate
sunt:
- .add() - pentru a adăuga o clasă la listă
- .remove() - pentru a elimina o clasă din listă
- .toggle() - să adăugați clasa dacă nu există sau să o eliminați din listă dacă există deja
- .contains() - returnează un boolean bazat pe conditia dacă clasa există sau nu în listă
Hai să aruncăm o privire!
Mai intai vom verifica daca o anumita clasa se contine intr-un element pe care il avem in
DOM:

Dupa cum vedem si in sectiunea element ca o asemenea clasa cu adevarat se contine in

elementul div.
Acum vom adauga o clasa noua:
Si o vom sterge:

Ultima metoda pe care o vom utiliza este toggle:

Iar acum vom vedea cum clasa ce nu este va fi adaugata cu metoda toggle:

Intrebare:
R: 1
Mai avem inca ceva de analizat, si anume, sa va arat ceva, avem urmatorul cod, salvat in
fisier JavaScript extern, care va stiliza un pic elementul h2 din pagina mea (la voi poate fi
oarecare alt element):
JavaScript extern:

CSS extern:

Fisierul HTML:
Acum sa mutam eticheta script din body in head si sa vedem ce se intampla:
 Actualizam pagina:

Vedem ca codul JavaScript nu mai functioneaza corect, desi eticheta script poate fi adaugata
atat in head cat si in body. Dar de acest lucru ne vom ocupa la lectiile urmatoare...
Recapitularea conținutului paginii stil
Am învățat o mulțime de conținut în această secțiune! Ne-am uitat la:
- modificarea stilurilor individuale cu .style.<prop>
- actualizarea mai multor stiluri simultan cu .style.cssText
- / setarea unei liste de clase cu .className
- obținerea / setarea / comutarea claselor CSS cu .classList
Recomandarea mea pentru dvs. este ca, din lista de tehnici pe care le-ați învățat în această
secțiune, să utilizați proprietatea .classList mai mult decât oricare alta. .classList este de
departe cea mai utilă proprietate a grupului și vă ajută să vă păstrați stilul CSS în afara
codului dvs. JavaScript.
Cercetări suplimentare
 stil pe MDN
 Articol: Utilizarea informațiilor de stil dinamic
 Metode DOM pentru a controla stilul
 nextElementSibling pe MDN
 className pe MDN
 classList pe MDN
 Specificitate pe MDN

La lecția 3 și 4 am studiat cum să:

- Actualizăm conținutul unei pagini
- Adăugăm conținut nou
- Ștergem anumit conținut
- Stilizăm diferite elemente