Атрибутът клас може да се използва в CSS за изпълнение на някои задачи за елементите със съответното име на клас. В тази статия обсъждаме как да добавите клас към елемент с помощта на JavaScript. в JavaScript , има някои подходи за добавяне на клас към елемент. Можем да използваме .className собственост или .add() метод за добавяне на име на клас към конкретния елемент.
Сега нека обсъдим подходите за добавяне на клас към елемент.
Използване на свойството .className
The .className свойство задава името на класа на елемент. Това свойство може да се използва за връщане на стойността на атрибута клас на елемент. Можем да използваме това свойство, за да добавим клас към HTML елемент, без да заместваме съществуващия клас.
За да добавим няколко класа, трябва да разделим имената им с интервал, като например 'клас1 клас2' .
Ако клас вече е деклариран за елемент и трябва да добавим ново име на клас към същия елемент, тогава той трябва да бъде деклариран чрез вмъкване на интервал, преди да напише новото име на клас, в противен случай то ще замени съществуващото име на клас. Може да се напише по следния начин:
document.getElementById('div1').className = ' newClass';
В горния код сме вмъкнали интервал преди нов клас .
Синтаксис
Често използваният синтаксис на това свойство за задаване или връщане на името на класа е даден по-долу.
За да зададете името на класа
element.className = class
За да върнете името на класа
element.className
Примерът за използване на .className имотът е даден, както следва.
Пример - Добавяне на името на класа
В този пример ние използваме .className свойство за добавяне на 'за' клас към елемента параграф, имащ id 'p1' . Ние прилагаме CSS към съответния параграф, използвайки името на класа 'за' .
Трябва да щракнем върху даденото HTML бутон „Добавяне на клас“ за да видите ефекта.
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'); } Тествайте сега Изход
След като щракнете върху дадения бутон, изходът ще бъде -
