Como adicionar o nome da classe ao elemento HTML através do JavaScript?

JavaScript fornece algumas abordagens para adicionar o nome da classe a um elemento html, como o ““.Método add () ” e a ““.nome da classe" propriedade. O nome da classe pode ser adicionado aos elementos usando o CSS (folha de estilo em cascata) e JavaScript. O principal objetivo de adicionar o nome da classe a um elemento HTML é obter diferentes funcionalidades no elemento selecionado usando o nome da classe especificado.

As abordagens JavaScript abaixo listadas podem ser usadas para adicionar o nome da classe a um elemento HTML:

• O que é ".add () ”em JavaScript?
• Como é que ".Método add () ”Trabalho em JavaScript?
• O que é ".ClassName ”em JavaScript?
• Como é que ".ClassName ”Trabalho da propriedade em JavaScript?

Então vamos começar!

O que é ".add () ”em JavaScript?

““.add () ”é um método interno da propriedade Classlist que pode ser usada para adicionar o nome da classe a qualquer elemento HTML específico. O snippet abaixo permitirá que você entenda como usar o “.Adicionar ”Método em JavaScript:

elemento.Lista de classe.add ("class_name");

Como é que ".Método add () ”Trabalho em JavaScript?

Esta seção apresentará um guia passo a passo para entender como adicionar o nome da classe a um elemento HTML usando JavaScript.

Neste programa, criaremos três arquivos um arquivo "html", um arquivo "css" e um arquivo "javascript":

Html

Como adicionar o nome da classe ao elemento HTML através do JavaScript?

Clique em mim!

Clicando no "Clique em mim!"O botão adicionará o nome da classe ao seguinte elemento P

Bem -vindo ao Linuxhint.com!!

No trecho acima, realizamos as seguintes funcionalidades:

• Nós utilizamos o

  tag para adicionar um título.

• Em seguida, utilizamos a tag para criar um botão e o nomear como “Clique em mim!”.
• Invocou o "ClassNameFun ()" sempre que o usuário clicou no botão.
• Em seguida, criamos um

  elemento.

• Finalmente, criamos um parágrafo usando

  elemento e atribuiu um id “addclass”.

CSS

.estilo
Alinhamento de texto: centro;
estilo de fonte: itálico;
Background-Color: Black;
cor branca;

O arquivo CSS serviu as seguintes funções:

• Alinhe o texto no centro usando a propriedade "Alinhamento de texto".
• Defina o estilo de fonte em itálico usando a propriedade "em estilo de fonte".
• Defina a cor do fundo preto usando a propriedade “Backward-Color”.
• Finalmente, defina a cor do texto em branco usando a propriedade "cor".

JavaScript

function classNameFun ()
Deixe para = documento.getElementById ("addclass");
pára.Lista de classe.add ("estilo");

O .O arquivo JS ou JavaScript serviu as funcionalidades listadas abaixo:

• Criou uma função chamada "ClassNameFun ()".
• Utilizou o método getElementById () para ler/editar um elemento HTML com um ID "addclass".
• Finalmente, utilizou o método Add para adicionar o nome ao

  elemento.

Saída
Na execução bem -sucedida do código, inicialmente, obteremos a seguinte saída:

Clicando em “Clique em mim!”O botão gerará a saída abaixo:

É assim que o “.Método add () ”Trabalho em JavaScript.

O que é ".ClassName ”em JavaScript?

O ".ClassName ӎ uma propriedade em JavaScript que define/retorna os atributos da classe de um elemento HTML. Pode ser usado para adicionar/especificar o nome da classe a qualquer tag html.

O trecho seguinte mostrará a sintaxe básica do “.ClassName ”Propriedade:

elemento.ClassName = Class_Name;

Aqui, o "Class_Name" representa o nome da classe. No caso de várias classes, podemos especificar o nome das classes usando sintaxe separada por vírgula.

Como é que ".ClassName ”Trabalho da propriedade em JavaScript?

Vamos considerar o exemplo abaixo dado para obter o entendimento básico do “.ClassName ”Propriedade.

Html

Como adicionar o nome da classe ao elemento HTML através do JavaScript?

Clique em mim!

Clicando no "Clique em mim!"O botão adicionará o nome da classe a este elemento

A classe HTML executou as seguintes tarefas:

• Utilizou o

  elemento para adicionar um título.

• Tag utilizado para criar um botão e o nomeou como “Clique em mim!”.
• Invocou o "ClassNameFun ()" sempre que o usuário clicou no botão.
• Finalmente, criou um

  e atribuiu um id “addclass”.

CSS

O arquivo CSS permanecerá o mesmo do exemplo anterior.

JavaScript

function classNameFun ()
Deixe HELENT = documento.getElementById ("addclass");
Helement.ClassName = "Style";

No arquivo JavaScript, utilizamos o getElementById () Método para ler/editar um elemento HTML com um ID “.addclass ”. Depois, utilizamos o método Add para adicionar o nome ao

elemento.

Saída
Quando executamos o programa acima, inicialmente, este programa produzirá a saída abaixo:

Depois de clicar em “Clique em mim!”Button, o ClassNameFun () será chamado, consequentemente, obteremos a seguinte saída:

A saída esclarece que o nome da classe foi adicionado com sucesso ao

elemento.

Conclusão

Em JavaScript, o “.Add () ”Método e“.A propriedade ClassName ”é usada para adicionar o nome da classe a qualquer elemento HTML. Esta redação explicou todos os princípios básicos para adicionar nomes de classe a qualquer elemento HTML. Este post explicou como usar o “.Add () ”Método e“.ClassName ”Propriedade com a ajuda de alguns exemplos adequados.