Atributul de clasă poate fi folosit în CSS pentru a face unele sarcini pentru elementele cu numele de clasă corespunzător. În acest articol, discutăm despre cum să adăugați o clasă la un element folosind JavaScript. În JavaScript , există câteva abordări pentru a adăuga o clasă la un element. Putem folosi .numele clasei proprietatea sau .adăuga() metodă de a adăuga un nume de clasă la elementul anume.
Acum, să discutăm despre abordările pentru a adăuga o clasă la un element.
Folosind proprietatea .className
The .numele clasei proprietatea setează numele clasei unui element. Această proprietate poate fi folosită pentru a returna valoarea atributului de clasă al unui element. Putem folosi această proprietate pentru a adăuga o clasă la un element HTML fără a înlocui clasa sa existentă.
Pentru a adăuga mai multe clase, trebuie să le separăm numele cu spațiu, cum ar fi „clasa 1 clasa 2” .
Dacă o clasă este deja declarată pentru un element și trebuie să adăugăm un nou nume de clasă aceluiași element, atunci aceasta ar trebui să fie declarată prin inserarea unui spațiu înainte de a scrie noul nume de clasă, altfel, acesta va suprascrie numele clasei existente. Se poate scrie astfel:
document.getElementById('div1').className = ' newClass';
În codul de mai sus, am introdus un spațiu înainte newClass .
Sintaxă
Sintaxa folosită în mod obișnuit a acestei proprietăți pentru a seta sau a returna numele clasei este dată mai jos.
Pentru a seta numele clasei
element.className = class
Pentru a returna numele clasei
element.className
Exemplul de utilizare a .numele clasei proprietatea este dată după cum urmează.
Exemplu - Adăugarea numelui clasei
În acest exemplu, folosim .numele clasei proprietate pentru adăugarea 'pentru' class la elementul paragraf având id „p1” . Aplicăm CSS la paragraful corespunzător folosind numele clasei 'pentru' .
Trebuie să facem clic pe dat butonul HTML „Adăugați curs” pentru a vedea efectul.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Testează-l acum Ieșire
După ce faceți clic pe butonul dat, rezultatul va fi -
