Klasseattributten kan bruges i CSS til at udføre nogle opgaver for elementerne med det tilsvarende klassenavn. I denne artikel diskuterer vi, hvordan man tilføjer en klasse til et element ved hjælp af JavaScript. I JavaScript , er der nogle metoder til at tilføje en klasse til et element. Vi kan bruge .klassenavn ejendom eller .tilføje() metode til at tilføje et klassenavn til det bestemte element.
Lad os nu diskutere tilgangene til at tilføje en klasse til et element.
Brug af egenskaben .className
Det .klassenavn egenskab angiver klassenavnet på et element. Denne egenskab kan bruges til at returnere værdien af klasseattributten for et element. Vi kan bruge denne egenskab til at tilføje en klasse til et HTML-element uden at erstatte dets eksisterende klasse.
For at tilføje flere klasser skal vi adskille deres navn med mellemrum som f.eks 'klasse1 klasse2' .
Hvis en klasse allerede er erklæret for et element, og vi skal tilføje et nyt klassenavn til det samme element, skal det erklæres ved at indsætte et mellemrum, før det nye klassenavn skrives, ellers vil det overskrive det eksisterende klassenavn. Det kan skrives som følger:
document.getElementById('div1').className = ' newClass';
I ovenstående kode har vi indsat et mellemrum før ny klasse .
Syntaks
Den almindeligt anvendte syntaks for denne egenskab til at indstille eller returnere klassenavnet er angivet nedenfor.
For at indstille klassens navn
element.className = class
For at returnere klassenavnet
element.className
Eksemplet med at bruge .klassenavn ejendom er givet som følger.
Eksempel - Tilføjelse af klassenavnet
I dette eksempel bruger vi .klassenavn ejendom til at tilføje 'til' klasse til afsnitselementet med id 'p1' . Vi anvender CSS på det tilsvarende afsnit ved hjælp af klassenavnet 'til' .
Vi skal klikke på det givne HTML-knap 'Tilføj klasse' for at 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 nu Produktion
Efter at have klikket på den givne knap, vil outputtet være -
