Alternar classe com JavaScript

1. Alternar classe de um elemento HTML ao passar o mouse em JavaScript
2. Alternar classe de um elemento HTML no clique do mouse em JavaScript

Apresentaremos um método para alternar a classe de elementos HTML usando JavaScript.

Alternar classe de um elemento HTML ao passar o mouse em JavaScript

Alternar a classe significa que se não houver um nome de classe atribuído ao elemento HTML, um nome de classe pode ser definido para ela dinamicamente ou, se uma classe específica já estiver presente, ela pode ser removida dinamicamente. Na computação, mouseover é um elemento de controle gráfico ativado quando o usuário move ou passa o ponteiro sobre uma área de gatilho, geralmente com um mouse.

A funcionalidade de alternância é introduzida em JavaScript. No arquivo JavaScript, usamos um método querySelector() que retorna o primeiro elemento que corresponde a um selector(es) CSS especificado (s) no documento. No arquivo abaixo, #container id está associado ao elemento <div>; portanto, temos o elemento <div> em um contêiner de variável. Para obter a funcionalidade necessária de alternar classes ao passar o mouse, precisamos usar o método addEventListener(), que anexa um manipulador de eventos ao documento HTML. E os eventos reais que usamos são eventos mouseenter e mouseleave. O evento mouseenter ocorre quando o ponteiro do mouse é movido para um elemento. O evento mouseleave ocorre quando o ponteiro do mouse é movido para fora do elemento.

Conforme o evento mouseenter ocorre, usamos a propriedade classList, os métodos add() e remove(). Quando o ponteiro do mouse é movido sobre a classe de elemento <div>, o primeiro elemento div é removido pelo método remove() e a classe second é adicionada ao elemento <div>. Da mesma forma, quando o ponteiro do mouse é movido para fora, ele adiciona a classe first e remove a classe second. Portanto, a alternância é obtida quando o mouse passa sobre o elemento <div>.

Temos um documento HTML onde os links para o arquivo CSS styles.css e o arquivo JavaScript index.js são especificados no documento HTML usando as tags <link> e <script></script> respectivamente. Queremos obter a funcionalidade de passar o ponteiro do mouse sobre o elemento <div> para que sua classe seja alternada. Faremos isso usando JavaScript. Em HTML, temos o elemento <div> identificado exclusivamente pelo contêiner id, e uma classe first já está associada ao mesmo elemento.

Em CSS, definimos as propriedades e valores dos seletores de classe. Tornamos o CSS simples, e a classe first tem uma propriedade background e seu valor é verde. Da mesma forma, a classe second tem uma propriedade background e valor orange.

Código de exemplo:

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

Alternar classe de um elemento HTML no clique do mouse em JavaScript

Podemos alternar uma classe HTML usando JavaScript com um clique do mouse, como fizemos para o mouse sobre o evento no método acima. Por exemplo, crie um parágrafo com uma tag <p> com a id de p. Escreva algum texto dentro da tag. Em seguida, crie uma tag <button> com o atributo onclick. Chame a função myFunc() com o atributo onclick. Escreva o texto Button entre as tags.

Em CSS, selecione paragraphClass com o seletor de classe e dê font-size para 30px e color para red. Em JavaScript, escreva a função myFunc() e selecione o id p do HTML com getElementById e armazene em uma variável para. Chame a propriedade classList e então o método toggle() com a variável. Escreva a classe paragraphClass como o parâmetro do método toggle().

Pegamos o elemento p dentro da variável para usando o método getElementById(). Usando a propriedade classList, usamos a função toggle() para o elemento <p> do documento HTML. Quando a parte inferior é clicada e myFunc() é executado, o seletor de classe CSS paragraphClass é ativado e desativado no elemento <p>. Conseqüentemente, a alternância é alcançada com um clique na parte inferior do mouse.

Código de exemplo:

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}