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('p1'); a.classList.add('para'); } Vyskúšajte to Výkon
Po kliknutí na dané tlačidlo bude výstup -
