Lista de classe JavaScript | Explicado

Um recurso JavaScript DOM chamado “Lista de classe”Pode ser usado para estilizar as classes CSS de um elemento. É uma propriedade JavaScript somente leitura que é usada para representar as informações incluídas na propriedade de classe de um elemento. Mais especificamente, os nomes das classes CSS são devolvidos pela lista de classe chamada.

Este artigo ilustrará a propriedade JavaScript de classe e seus usos no JavaScript.

O que é classe em JavaScript?

O "Lista de classe”É o atributo JavaScript DOM somente leitura, representando os dados na propriedade de classe de um elemento. Dá os nomes das classes CSS como saída. Apesar de ser somente leitura, a lista de classe ainda pode ser usada para mudar as classes. Além disso, você pode modificar as classes CSS fornecidas a um elemento HTML usando o objeto Classlist.

Sintaxe

Siga a sintaxe dada para usar o atributo Classlist:

elemento.lista de classe;

Aqui o "elementoӃ o elemento HTML.

Exemplo

Neste exemplo, criaremos um botão atribuindo uma classe chamada “botão”E anexe o evento onclick () que produzirá os nomes da classe atribuída ao botão quando acionado:

Clique para mostrar a classe atribuída ao botão

Clique aqui

Agora, definiremos o raio da borda do botão como “2cm”No arquivo CSS:

.botão
Radio de fronteira: 2cm;

Vamos vincular a folha de estilo ao arquivo html usando o “" marcação:

No arquivo JavaScript, defina uma função “ButtonClick ()”De tal maneira que, quando é invocado, primeiro, o documento.getElementById () Método Botão de acesso usando seu ID e, em seguida, exiba a classe atribuída ao botão em um método alert ():

função buttonClick ()
var click = documento.getElementById ("btn");
Alerta (clique.lista de classe);

Saída

Vamos conferir os métodos da propriedade JavaScript.

Quais são os métodos da propriedade de classe?

Existem alguns métodos da propriedade de classe são os seguintes:

• adicionar()
• remover()
• alternar()
• contém ()
• item()
• substituir()

A tabela abaixo do rumo compreende a descrição dos métodos mencionados:

Métodos	Descrição
adicionar()	Você pode adicionar uma ou mais classes a um elemento com o método add ().
remover()	Para eliminar as classes da lista de classes do elemento, use o método Remover ().
alternar()	Alternando os nomes de classe específicos de um elemento é feita usando o método Toggle (). A classe especificada é adicionada com um clique e a classe é removida com outro clique.
contém ()	Para verificar se a classe fornecida existe no elemento ou não, utilize o método cont ().
item()	É usado para mostrar os nomes das classes presentes no índice específico.
substituir()	Uma classe existente pode ser substituída por uma nova classe usando o método substituir ().

Agora, discutiremos alguns métodos comumente usados ​​da lista de classe.

Exemplo 1: Como usar o método Add () de Classlist Property?

Adicionaremos novas aulas no botão clicando no novo “Adicionar classe ao botão”:

Adicionar classe ao botão

Em seguida, crie duas classes “btncolor" e "texto em negrito”Isso adicionará os botões cor de fundo e em negrito o texto do botão:

.btncolor
Background-Color: BlueViolet;

.texto em negrito
intensidade da fonte: Negrito;

No arquivo javascript, defina uma função chamada “addclass ()"Que vai chamar o"adicionar()”Método da lista de classe com o nome de classe como um argumento adicionado na classe do botão:

função addclass ()
var newclass = documento.getElementById ("btn").lista de classe;
Newclass.add ("btncolor");
Newclass.add ("BoldText");

A saída indica que as novas classes são adicionadas no botão “Clique aqui" quando "Adicionar classe ao botão”É clicado. Em seguida, clique no “Clique aqui”Botão para exibir a lista de classes:

Exemplo 2: Como usar o método Remone () de Classlist Property?

Agora vamos remover uma aula da lista. Para fazer isso, criaremos um novo botão “Remova a classe do botão”E anexe um evento onclick () com ele:

Remova a classe do botão

Vamos definir uma função “removeclass ()”No arquivo JavaScript para remover a classe“btncolor”Da lista das classes:

função removeclass ()
var newclass = documento.getElementById ("btn").lista de classe;
Newclass.remover ("btncolor");

Como você pode ver na saída, o “Clique aqui”Button exibia uma classe chamada“botão”E então quando o“Adicionar classe ao botão”É clicado, duas novas classes“texto em negrito" e "btncolor”São adicionados à lista e a cor de fundo do botão também é alterada. Por fim, clicando no “Remova a classe do botão”Removerá o“btncolor”Classe da lista:

Exemplo 3: Como usar o método Toggle () de Classlist Property?

Agora, usaremos o método Toggle () para alternar a lista de classes em um clique e removeremos em outro clique:

Botão de alternância

No arquivo JavaScript, defina uma função “toggleClass ()”Isso primeiro adicionará a cor do botão em um clique e depois o remove no outro clique:

função toggleClass ()
var newclass = documento.getElementById ("btn").lista de classe;
Newclass.alternar ("btncolor");

A saída correspondente é a seguinte:

Todas as diretrizes fundamentais para a propriedade JavaScript Property foram cobertas.

Conclusão

O "Lista de classe”É o atributo somente leitura do JavaScript que fornece os nomes das classes CSS atribuídas ao elemento HTML. Permite alterar as classes CSS com a ajuda de seus métodos predefinidos, incluindo add (), remover (), alternar () e assim por diante. Nesta redação, ilustramos a propriedade JavaScript de classe e seus métodos com exemplos detalhados.