JavaScript Adicionar Classe ao Elemento

Ammar Ali 3 julho 2021
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:

JavaScript Adicionando classe usando a propriedade classList

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:

JavaScript Adicionando Classe Usando um Botão

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.

Autor: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Artigo relacionado - JavaScript Class