Atribút class možno použiť v CSS na vykonanie niektorých úloh pre prvky s príslušným názvom triedy. V tomto článku diskutujeme o tom, ako pridať triedu do prvku pomocou JavaScriptu. In JavaScript , existuje niekoľko prístupov na pridanie triedy k prvku. Môžeme použiť .názov triedy majetok alebo .add() metóda na pridanie názvu triedy ku konkrétnemu prvku.

Teraz poďme diskutovať o prístupoch na pridanie triedy k prvku.

Použitie vlastnosti .className

The .názov triedy vlastnosť nastavuje názov triedy prvku. Túto vlastnosť možno použiť na vrátenie hodnoty atribútu class prvku. Túto vlastnosť môžeme použiť na pridanie triedy do prvku HTML bez toho, aby sme nahradili existujúcu triedu.

Pre pridanie viacerých tried musíme ich názov oddeliť medzerou ako napr 'class1 class2' .

Ak je trieda už deklarovaná pre prvok a my potrebujeme pridať nový názov triedy k rovnakému prvku, potom by mala byť deklarovaná vložením medzery pred napísaním nového názvu triedy, inak sa prepíše existujúci názov triedy. Dá sa napísať nasledovne:

 document.getElementById('div1').className = ' newClass'; 

Vo vyššie uvedenom kóde sme predtým vložili medzeru newClass .

Syntax

Bežne používaná syntax tejto vlastnosti na nastavenie alebo vrátenie názvu triedy je uvedená nižšie.

Ak chcete nastaviť názov triedy

 element.className = class 

Ak chcete vrátiť názov triedy

 element.className 

Príklad použitia .názov triedy vlastnosť je daná nasledovne.

Príklad - Pridanie názvu triedy

V tomto príklade používame .názov triedy vlastnosť na pridanie 'pre' triedy na prvok odseku s id 'p1' . Aplikujeme CSS na príslušný odsek pomocou názvu triedy 'pre' .

Dané musíme kliknúť tlačidlo HTML 'Pridať triedu' aby ste videli efekt.

 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(&apos;p1&apos;); a.classList.add(&apos;para&apos;); } 

Výkon

Po kliknutí na dané tlačidlo bude výstup -