JavaScript Adicionar Classe ao Elemento
Este tutorial irá discutir a adição de uma classe a um determinado elemento usando a propriedade classList em JavaScript.
Adicionar uma classe a um determinado elemento usando a propriedade classList em JavaScript
Se você deseja adicionar uma classe a um determinado elemento em JavaScript, pode usar a propriedade classList. Primeiro, você deve obter o elemento fornecido, e a maneira mais fácil de fazer isso é obtê-lo usando seu id. Suponha que um id não seja fornecido ao elemento; nesse caso, você pode fornecer a ele um id exclusivo e obter o elemento usando a propriedade getElementById em JavaScript e armazená-lo em uma variável. Depois disso, você pode usar a variável para alterar sua propriedade usando a propriedade classList. Por exemplo, vamos mudar a classe de um texto usando um botão. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
No código acima, temos uma tag de estilo na qual definimos propriedades de um objeto de classe; dentro da tag body, temos um botão e algum texto, e dentro da tag script, estamos mudando a classe do texto usando seu id. Neste exemplo, a folha de estilo e o código JavaScript são colocados dentro do mesmo arquivo HTML, mas você também pode colocá-los em arquivos separados e vinculá-los ao arquivo HTML. Para executar o código acima, você precisa copiar o código em um arquivo HTML e abri-lo usando um navegador.
Resultado:
Como você pode ver na saída, há um botão e algum texto. Ao pressionar este botão, a classe do texto será alterada.
Saída quando o botão é pressionado:
Como você pode ver na saída, a forma do texto foi alterada devido à mudança na classe. Neste exemplo, estamos usando um botão para alterar a classe de um elemento, mas você pode alterar a condição na qual deseja alterar a classe de um determinado elemento. Você não pode usar a propriedade classList no Internet Explorer 9. Em vez disso, você pode usar o operador += para adicionar a propriedade a um determinado elemento. Você deve alterar a última linha da função myFun dentro da tag de script com a linha abaixo.
ob.className += " newclass";
Você tem que usar um espaço antes do nome da turma porque talvez haja outras turmas presentes.
