Klasseattributtet kan brukes i CSS for å gjøre noen oppgaver for elementene med det tilsvarende klassenavnet. I denne artikkelen diskuterer vi hvordan du legger til en klasse i et element ved hjelp av JavaScript. I JavaScript , er det noen tilnærminger for å legge til en klasse til et element. Vi kan bruke .klassenavn eiendom eller .Legg til() metode for å legge til et klassenavn til det bestemte elementet.
La oss nå diskutere fremgangsmåtene for å legge til en klasse til et element.
Bruker .className-egenskapen
De .klassenavn egenskapen setter klassenavnet til et element. Denne egenskapen kan brukes til å returnere verdien av klasseattributtet til et element. Vi kan bruke denne egenskapen til å legge til en klasse til et HTML-element uten å erstatte den eksisterende klassen.
For å legge til flere klasser, må vi skille navnet deres med mellomrom som f.eks 'klasse1 klasse2' .
Hvis en klasse allerede er deklarert for et element, og vi må legge til et nytt klassenavn til det samme elementet, bør det deklareres ved å sette inn et mellomrom før du skriver det nye klassenavnet, ellers vil det overskrive det eksisterende klassenavnet. Det kan skrives som følger:
document.getElementById('div1').className = ' newClass';
I koden ovenfor har vi satt inn et mellomrom tidligere ny klasse .
Syntaks
Den ofte brukte syntaksen til denne egenskapen for å angi eller returnere klassenavnet er gitt nedenfor.
For å angi klassenavnet
element.className = class
For å returnere klassenavnet
element.className
Eksempelet på bruk av .klassenavn eiendom er gitt som følger.
Eksempel - Legge til klassenavnet
I dette eksemplet bruker vi .klassenavn eiendom for å legge til 'til' klasse til avsnittselementet som har id 'p1' . Vi bruker CSS på det tilsvarende avsnittet ved å bruke klassenavnet 'til' .
Vi må klikke på den gitte HTML-knapp 'Legg til klasse' for å se effekten.
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'); } Test det nå Produksjon
Etter å ha klikket på den gitte knappen, vil utgangen være -
