Klassattributet kan användas i CSS för att utföra vissa uppgifter för elementen med motsvarande klassnamn. I den här artikeln diskuterar vi hur man lägger till en klass till ett element med hjälp av JavaScript. I JavaScript , det finns några metoder för att lägga till en klass till ett element. Vi kan använda .klassnamn egendom eller .Lägg till() metod för att lägga till ett klassnamn till det specifika elementet.
Låt oss nu diskutera metoderna för att lägga till en klass till ett element.
Använder egenskapen .className
De .klassnamn egenskapen anger klassnamnet för ett element. Denna egenskap kan användas för att returnera värdet av klassattributet för ett element. Vi kan använda den här egenskapen för att lägga till en klass till ett HTML-element utan att ersätta dess befintliga klass.
För att lägga till flera klasser måste vi separera deras namn med mellanslag som t.ex 'klass1 klass2' .
Om en klass redan är deklarerad för ett element, och vi behöver lägga till ett nytt klassnamn till samma element, bör den deklareras genom att infoga ett mellanslag innan det nya klassnamnet skrivs, annars kommer det att skriva över det befintliga klassnamnet. Det kan skrivas så här:
document.getElementById('div1').className = ' newClass';
I ovanstående kod har vi infogat ett mellanslag tidigare nyklass .
Syntax
Den vanliga syntaxen för denna egenskap för att ställa in eller returnera klassnamnet anges nedan.
För att ställa in klassnamnet
element.className = class
För att returnera klassnamnet
element.className
Exemplet med att använda .klassnamn egendom ges enligt följande.
Exempel - Lägga till klassnamnet
I det här exemplet använder vi .klassnamn egendom för att lägga till 'för' klass till styckeelementet som har id 'p1' . Vi tillämpar CSS på motsvarande stycke med klassnamnet 'för' .
Vi måste klicka på det givna HTML-knapp 'Lägg till klass' för att 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'); } Testa det nu Produktion
Efter att ha klickat på den givna knappen kommer utgången att vara -
