Nome da classe JavaScript

Resumo : neste tutorial, você aprenderá como usar a classNamepropriedade JavaScript para manipular classes CSS de um elemento.

Introdução à classe JavaScriptName

The classNameé a propriedade de um elemento que retorna uma lista separada por espaços de classes CSS do elemento como uma string:

element.classNameLinguagem de código:  CSS  ( css )

Suponha que você tenha o seguinte ulelemento:

<ul id="menu" class="vertical main">
   <li>Homepage</li>
   <li>Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>Linguagem de código:  HTML, XML  ( xml )

O seguinte mostra as classes do ulelemento na janela do console:

let menu = document.querySelector('#menu');
console.log(menu.className);Linguagem de código:  JavaScript  ( javascript )

Saída:

vertical main

Para adicionar uma nova classe a um elemento usando a classNamepropriedade, você pode concatenar o nome da classe existente com um novo:

element.className += newClassName; 

O +=operador concatena newClassName com a lista de classes existente do elemento. Portanto, você precisa prefixar o novo nome da classe com um espaço como este:

let menu = document.querySelector('#menu');
menu.className += ' new';
console.log(menu.className);Linguagem de código:  JavaScript  ( javascript )

Saída:

'vertical main new'Linguagem de código:  JavaScript  ( javascript )

Na prática, você usará o classListpara adicionar uma nova classe às classes existentes de um elemento:

let menu = document.querySelector('#menu');
menu.classList.add('new');
console.log(menu.className);Linguagem de código:  JavaScript  ( javascript )

Saída:

'vertical main new'Linguagem de código:  JavaScript  ( javascript )

Para substituir completamente todas as classes de um elemento, você usa um operador de atribuição simples. Por exemplo:

element.className = "class1 class2";Linguagem de código:  JavaScript  ( javascript )

Para obter uma lista completa das classes de um elemento, basta acessar a classNamepropriedade:

let classes = element.className;Linguagem de código:  JavaScript  ( javascript )

Como the classé uma palavra-chave em JavaScript, o nome classNameé usado em vez de class.

Além disso, classé um atributo HTML:

<div id="note" class="info yellow-bg red-text">JS className</div>Linguagem de código:  HTML, XML  ( xml )

while classNameé uma propriedade DOM do elemento:

let note = document.querySelector('#note');
console.log(note.className); Linguagem de código:  JavaScript  ( javascript )

Saída:

info yellow-bg red-text

Um elemento possui outra propriedade que ajuda você a manipular melhor suas classes CSS, chamada classList.

Resumo

• classNameretorna uma lista separada por espaços de classes de um elemento como uma string.