JavaScript classList é uma propriedade DOM do JavaScript que permite estilizar as classes CSS (Cascading Style Sheet) de um elemento. ClassList JavaScript é uma propriedade somente leitura que retorna os nomes das classes CSS. É uma propriedade do JavaScript em relação às outras propriedades do JavaScript que inclui estilo e className. A propriedade style retorna a cor ou outro estilo do elemento de classe CSS, e className é usado para retornar os nomes das classes usadas no arquivo CSS. No entanto, as propriedades className e classList retornam o nome das classes que usamos no arquivo CSS, mas de maneiras diferentes. A propriedade className retorna o nome das classes na forma de uma string, enquanto a propriedade classList de JavaScript retorna o nome das classes na forma de um array.
Aqui, faremos uma breve discussão sobre JavaScript classList e também discutiremos seus métodos com suas implementações práticas.
Exemplo de propriedade JavaScript classList
Abaixo está um exemplo de propriedade JavaScript classList através da qual obteremos o valor da classe de um elemento.
mb x gb
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } A saída do código acima é mostrada abaixo:
Propriedade classList JavaScript
A propriedade classList é usada para representar o valor dos elementos da classe que é um DOMTokenList objeto. É uma propriedade somente leitura, mas podemos modificar seu valor manipulando as classes utilizadas no programa. A propriedade JavaScript classList consiste nos seguintes métodos através dos quais podemos realizar diferentes operações nos elementos da classe:
Estes são alguns dos métodos usados na classList JavaScript.
Discutiremos um por um.
chamando a função js de html
classList.add()
A função usada para adicionar uma ou mais classes ao elemento CSS.
Exemplo:
O exemplo abaixo mostra como adicionar uma classe usando o método classList.add():
.myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.add('myClass'); } No código, quando o usuário clica no botão, a nova classe é adicionada às classes existentes. A saída após clicar no botão é mostrada abaixo:
classList.remove()
A função remove() é usada para remover as classes existentes dos elementos.
O exemplo abaixo mostra como remover uma ou mais classes usando o método classlist.remove():
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } No código acima, quando o usuário clica no botão, a classe específica especificada é removida das classes CSS existentes. A saída após clicar no botão é mostrada abaixo:
Lista de classes.toggle()
O botão toggle() é usado para alternar classes para o elemento. Significa adicionar uma nova classe ou remover as classes existentes.
Abaixo está um exemplo que nos fará entender como utilizar o método toggle() para adicionar ou remover classes.
Exemplo:
.myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById('Btn'); e.classList.toggle('myClass2'); } No código, quando o usuário clicar no botão, a classe será adicionada ou removida das classes CSS. A saída após clicar no botão é mostrada abaixo:
leia o arquivo csv em java
Lista de classes.contains()
O método contains() é usado para verificar se a classe especificada existe nas classes CSS e em relação a ela retorna o valor booleano como verdadeiro ou falso.
gerenciador de tarefas para linux
Abaixo está um exemplo que mostra como procurar uma classe se ela existe ou não usando o método contains():
Exemplo:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } No código acima, vê-se que quando o usuário clica no botão, ele verifica se a classe especificada está presente nas classes CSS. Se estiver presente, um valor booleano verdadeiro será retornado. Caso contrário, ele retornará falso. A saída do código acima após clicar no botão é mostrada abaixo:
lista de classes.replace()
O método replace() é usado para substituir uma classe existente por uma nova. Isso não significa que a classe seja removida dos elementos, mas as propriedades da classe existente serão substituídas pelas propriedades da nova classe.
Abaixo está um exemplo através do qual entenderemos como podemos substituir uma classe existente por uma nova classe:
Exemplo:
classificação por mesclagem
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } No código acima, quando o usuário clica no botão, as propriedades da classe existentes são substituídas pelas novas propriedades da classe. A saída após clicar no botão é mostrada abaixo:
classList.item()
A função item() é usada para retornar o nome da classe que está presente no valor do índice especificado.
Abaixo está um exemplo que nos fará entender como usar o método item() para retornar o valor:
Exemplo:
<h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById('Btn'); alert(e.classList.item(2)); } No código, quando o usuário clicar no botão, será exibida a classe presente no índice especificado. Após clicar no botão, obtemos o valor da classe de índice especificada, conforme mostrado abaixo:
Estes são alguns dos métodos do objeto DOM classList e tudo sobre classList.