O atributo class pode ser usado em CSS para realizar algumas tarefas para os elementos com o nome de classe correspondente. Neste artigo, estamos discutindo como adicionar uma classe a um elemento usando JavaScript. Em JavaScript , existem algumas abordagens para adicionar uma classe a um elemento. Podemos usar o .nome da classe propriedade ou o .adicionar() método para adicionar um nome de classe ao elemento específico.
Agora, vamos discutir as abordagens para adicionar uma classe a um elemento.
Usando a propriedade .className
O .nome da classe propriedade define o nome da classe de um elemento. Esta propriedade pode ser usada para retornar o valor do atributo de classe de um elemento. Podemos usar esta propriedade para adicionar uma classe a um elemento HTML sem substituir sua classe existente.
Para adicionar várias classes, temos que separar seus nomes com espaço, como 'classe1 classe2' .
Se uma classe já estiver declarada para um elemento e precisarmos adicionar um novo nome de classe ao mesmo elemento, ele deverá ser declarado inserindo um espaço antes de escrever o novo nome de classe, caso contrário, ele substituirá o nome de classe existente. Pode ser escrito da seguinte forma:
document.getElementById('div1').className = ' newClass';
No código acima, inserimos um espaço antes nova classe .
Sintaxe
A sintaxe comumente usada desta propriedade para definir ou retornar o nome da classe é fornecida abaixo.
Para definir o nome da classe
element.className = class
Para retornar o nome da classe
element.className
O exemplo do uso do .nome da classe propriedade é dada da seguinte forma.
Exemplo - Adicionando o nome da classe
Neste exemplo, estamos usando o .nome da classe propriedade para adicionar o 'para' class para o elemento de parágrafo com id 'p1' . Estamos aplicando o CSS ao parágrafo correspondente usando o nome da classe 'para' .
Temos que clicar no dado Botão HTML 'Adicionar Classe' para ver o efeito.
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'); } Teste agora Saída
Depois de clicar no botão fornecido, a saída será -
