Resumo : neste tutorial, você aprenderá como usar a className
propriedade 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.className
Linguagem de código: CSS ( css )
Suponha que você tenha o seguinte ul
elemento:
<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 ul
elemento 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 className
propriedade, 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 classList
para 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 className
propriedade:
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
className
retorna uma lista separada por espaços de classes de um elemento como uma string.