L'atribut class es pot utilitzar en CSS per fer algunes tasques per als elements amb el nom de classe corresponent. En aquest article, estem discutint com afegir una classe a un element mitjançant JavaScript. En JavaScript , hi ha alguns enfocaments per afegir una classe a un element. Podem utilitzar el .className propietat o el .add() mètode per afegir un nom de classe a l'element concret.
Ara, analitzem els enfocaments per afegir una classe a un element.
S'utilitza la propietat .className
El .className La propietat estableix el nom de classe d'un element. Aquesta propietat es pot utilitzar per retornar el valor de l'atribut de classe d'un element. Podem utilitzar aquesta propietat per afegir una classe a un element HTML sense substituir la seva classe existent.
Per afegir diverses classes, hem de separar el seu nom amb espais com ara 'classe 1 classe 2' .
Si ja s'ha declarat una classe per a un element i hem d'afegir un nou nom de classe al mateix element, s'hauria de declarar inserint un espai abans d'escriure el nom de la nova classe, en cas contrari, sobreescriurà el nom de classe existent. Es pot escriure de la següent manera:
document.getElementById('div1').className = ' newClass';
Al codi anterior, hem inserit un espai abans nova classe .
Sintaxi
La sintaxi que s'utilitza habitualment d'aquesta propietat per establir o retornar el nom de la classe es mostra a continuació.
Per definir el nom de la classe
element.className = class
Per tornar el nom de la classe
element.className
L'exemple de l'ús del .className propietat es dóna de la següent manera.
Exemple: afegir el nom de la classe
En aquest exemple, estem utilitzant el .className propietat per afegir el 'per' class a l'element paràgraf amb id 'p1' . Estem aplicant el CSS al paràgraf corresponent utilitzant el nom de la classe 'per' .
Hem de fer clic al donat botó HTML 'Afegeix classe' per veure l'efecte.
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'); } Prova-ho ara Sortida
Després de fer clic al botó donat, la sortida serà -
