Atribut class lze v CSS použít k provádění některých úkolů pro prvky s odpovídajícím názvem třídy. V tomto článku diskutujeme o tom, jak přidat třídu do prvku pomocí JavaScriptu. v JavaScript , existuje několik přístupů k přidání třídy k prvku. Můžeme použít .jméno třídy majetek nebo .přidat() metoda pro přidání názvu třídy ke konkrétnímu prvku.
Nyní si proberme přístupy k přidání třídy k prvku.
Použití vlastnosti .className
The .jméno třídy vlastnost nastavuje název třídy prvku. Tuto vlastnost lze použít k vrácení hodnoty atributu class prvku. Tuto vlastnost můžeme použít k přidání třídy do prvku HTML, aniž bychom nahradili jeho existující třídu.
Chcete-li přidat více tříd, musíme jejich název oddělit mezerou, jako je např 'class1 class2' .
Pokud je třída již deklarována pro prvek a potřebujeme ke stejnému prvku přidat nový název třídy, pak by měla být deklarována vložením mezery před napsáním nového názvu třídy, jinak přepíše stávající název třídy. Dá se to napsat následovně:
document.getElementById('div1').className = ' newClass';
Do výše uvedeného kódu jsme předtím vložili mezeru nová třída .
Syntax
Běžně používaná syntaxe této vlastnosti pro nastavení nebo vrácení názvu třídy je uvedena níže.
Chcete-li nastavit název třídy
element.className = class
Chcete-li vrátit název třídy
element.className
Příklad použití .jméno třídy vlastnost je dána následovně.
Příklad - Přidání názvu třídy
V tomto příkladu používáme .jméno třídy vlastnost pro přidání 'pro' třídy na prvek odstavce s id 'p1' . Aplikujeme CSS na odpovídající odstavec pomocí názvu třídy 'pro' .
Musíme kliknout na dané HTML tlačítko 'Přidat třídu' abyste viděli 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'); } Otestujte to hned Výstup
Po kliknutí na dané tlačítko bude výstupem -
