Как да промените класа на HTML елемент с JavaScript?

Във фазата на проектиране на уеб страница или уебсайт има определени ситуации, при които вече не е необходимо да имате достъп до определени елементи поради някаква актуализация. Освен това, когато има нужда от присвояване на повече от един клас на определен елемент в html. В такива случайни сценарии промяната на класа на HTML елемент в JavaScript е от голяма помощ за справяне с такива ситуации.

Този блог ще демонстрира подходите, които трябва да имате предвид, докато променяте класа на HTML елемент в JavaScript.

Как да промените класа на HTML елемент с JavaScript?

За да промените класа на HTML елемент с JavaScript, могат да се приложат следните подходи:

• • “ className ' Имот.
  • “ classList ' Имот.

Подход 1: Променете класа на HTML елемент с JavaScript, като използвате свойството className

Този подход може да влезе в сила чрез достъп до създадения клас, свързан с елемент, и присвояване на различен клас.

Следващият пример демонстрира заявената концепция.

Пример

В дадения по-долу код в рамките на „ <тяло> ”, включете следното заглавие в „

” таг. След това създайте посочения бутон, който ще бъде зададен като по подразбиране „ клас ”, което ще бъде променено по-късно в кода. Освен това му задайте „ документ за самоличност “ и прикачен “ onclick ” събитие, извикващо функцията Class().

По-късно в кода включете следното съобщение в „

”, за да го покажете в DOM при трансформацията на клас:

HTML код:

< тяло стил = 'подравняване на текст: център;' >
< h2 > Промяна на елемента Име на клас

Старото име на класа е: клас по подразбиране

В JS кода декларирайте функция с име „ клас() ”. Тук достъпете класа по подразбиране чрез неговия id, като използвате „ document.getElementById() ” метод. „ className ” ще трансформира създадения клас в класа с име „ нов клас ”.

И накрая, „ innerText ” ще покаже следното съобщение заедно с променения клас:

JS код:

Изход

В горния изход наблюдавайте промяната на „ клас ” вдясно при щракване върху бутона в DOM.

Подход 2: Промяна на класа на HTML елемент с JavaScript с помощта на свойството classList

Този конкретен подход може да бъде приложен, за да премахнете посочения клас и да му присвоите нов клас, като по този начин го промените.

Пример

Първо, повторете описаните по-горе методи за включване на заглавие, създаване на бутон с присвоения клас, идентификатор и прикачено събитие onclick, извикващо определената функция. След това добавете по подобен начин секцията със заглавие в „

” таг за уведомяване на потребителя за променения клас при натискане на бутона:

HTML код

< тяло стил = 'подравняване на текст: център;' >
< h2 > Промяна на класа на елемента ! h2 >
< бутон клас = 'уебсайт' onclick = 'Клас()' документ за самоличност = 'промяна' > Щракнете върху мен бутон >
< h3 документ за самоличност = 'глава' стил = 'цвят на фона: светлосив;' > Старото име на класа е: Уебсайт h3 >
тяло >

Сега декларирайте функция с име „ клас() ”. В неговата дефиниция приложете „ classList ” собственост заедно с „ Премахване() ' метод за пропускане на достъпния клас с име ' уебсайт ”, което съответства на създадения бутон.

В следващата стъпка присвоете нов клас към същия клас, като използвате обсъжданото свойство с „ добави () ” метод. И накрая, покажете променения клас, както беше обсъдено в предишния подход:

JS код

функция Клас ( ) {
document.getElementById ( 'промяна' ) .classList.remove ( 'уебсайт' )
document.getElementById ( 'промяна' ) .classList.add ( 'Линукс' ) ;
var access = document.getElementById ( 'промяна' ) .classList;
document.getElementById ( 'глава' ) .innerHTML = 'Новото име на класа е: ' + достъп;
}

Изход

Това описание имаше за цел да изясни концепцията за промяна на класа на HTML елемента с помощта на JavaScript.

Заключение

„ className ' и ' classList ” могат да се използват за промяна на класа на HTML елемент. Свойството className доведе до по-бърз подход при изпълнение на желаното изискване в сравнение със свойството classList, тъй като включваше по-малко сложност на кода. Свойството classList, от друга страна, промени класа по подразбиране с помощта на допълнителни два метода. Тази статия илюстрира подходите за промяна на класа на HTML елемент с JavaScript.