Alternar clase con JavaScript

1. Alternar la clase de un elemento HTML al pasar el mouse en JavaScript
2. Alternar la clase de un elemento HTML al hacer clic con el mouse en JavaScript

Introduciremos un método para alternar la clase de elementos HTML usando JavaScript.

Alternar la clase de un elemento HTML al pasar el mouse en JavaScript

Alternar la clase significa que si no hay un nombre de clase asignado al elemento HTML, entonces se puede establecer un nombre de clase dinámicamente, o si una clase específica ya está presente, entonces se puede eliminar dinámicamente. En informática, el mouseover es un elemento de control gráfico que se activa cuando el usuario mueve o coloca el puntero sobre un área de activación, generalmente con un mouse.

La funcionalidad de alternancia se introduce en JavaScript. En el archivo JavaScript, usamos un método querySelector() que devuelve el primer elemento que coincide con un selector o selectores CSS especificados en el documento. En el archivo siguiente, la identificación #container está asociada con el elemento <div>; por lo tanto, obtuvimos el elemento <div> en un contenedor de variables. Para lograr la funcionalidad requerida de alternar clases con el desplazamiento del mouse, necesitamos usar el método addEventListener(), que adjunta un controlador de eventos al documento HTML. Y los eventos reales que usamos son los eventos mouseenter y mouseleave. El evento mouseenter ocurre cuando el puntero del mouse se mueve sobre un elemento. El evento mouseleave ocurre cuando el puntero del mouse se mueve fuera del elemento.

Cuando ocurre el evento mouseenter, usamos la propiedad classList, los métodos add() y remove(). Cuando el puntero del mouse se mueve sobre la clase de elemento <div>, el primer elemento div es eliminado por el método remove(), y la clase second se agrega al elemento <div>. De manera similar, cuando el puntero del mouse se mueve hacia afuera, agrega la clase first y elimina la clase second. Por lo tanto, el cambio se logra cuando el mouse se ha desplazado sobre el elemento <div>.

Tenemos un documento HTML donde los enlaces al archivo CSS styles.css y el archivo JavaScript index.js se especifican en el documento HTML utilizando las etiquetas <link> y <script></script> respectivamente. Queremos lograr la funcionalidad de pasar el puntero del mouse sobre el elemento <div> de su clase a alternar. Haremos esto usando JavaScript. En HTML, tenemos el elemento <div> identificado unívocamente por el contenedor id, y una clase first ya está asociada con el mismo elemento.

En CSS, definimos las propiedades y los valores de los selectores de clases. Hicimos el CSS simple, y la clase first tiene una propiedad background y su valor es verde. Del mismo modo, la clase second tiene una propiedad background y el valor orange.

Código de ejemplo:

<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 la clase de un elemento HTML al hacer clic con el mouse en JavaScript

Podemos alternar una clase HTML usando JavaScript al hacer clic con el mouse como hicimos para el mouse sobre el evento en el método anterior. Por ejemplo, cree un párrafo con una etiqueta <p> con la identificación de p. Escribe algo de texto dentro de la etiqueta. Luego, cree una etiqueta <button> con el atributo onclick. Llame a la función myFunc() con el atributo onclick. Escriba el texto Botón entre las etiquetas.

En CSS, seleccione paragraphClass con el selector de clases y asigne el font-size a 30px y el color a red. En JavaScript, escriba la función myFunc() y seleccione el id p de HTML con getElementById y almacénelo en una variable para. Llame a la propiedad classList y luego al método toggle() con la variable. Escriba la clase paragraphClass como el parámetro del método toggle().

Conseguimos el elemento p dentro de la variable para usando el método getElementById(). Usando la propiedad classList usamos la función toggle() para el elemento <p> del documento HTML. Cuando se hace clic en la parte inferior y se ejecuta myFunc(), el selector de clases CSS paragraphClass se activa y desactiva en el elemento <p>. Por lo tanto, la alternancia se logra con un clic en la parte inferior del mouse.

Código de ejemplo:

<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');
}