Añadir y quitar clases CSS sobre elementos

Veamos más ejemplos para ir tomando costumbre de trabajar con este framework. Poco a poco iremos desgranando todo el poder de este fantástico framework, pero vayamos paso a paso.

En este siguiente ejemplo, queremos demostrar el uso de JQuery para alterar elementos de una página web, añadiendo y quitando clases CSS. Esto es muy fácil de hacer con JQuery, porque los elementos tienen dos clases llamadas addClass() y removeClass(), que sirven justamente para que el elemento que recibe el método se le aplique una clase o se le elimine. Por lo que en este capítulo aprenderemos a manejar estos dos nuevos elementos.

Para complicarlo algo más, vamos a añadir y quitar clases del elemento con respuestas a acciones del usuario, para aprender también nuevos eventos de usuario.

En nuestro ejemplo tendremos dos elementos, primero una capa <div> con un texto. Después un enlace que estará fuera de la capa <div>. Al situar el usuario el ratón sobre el enlace añadiremos una clase CSS a nuestra capa, y al retirar el ratón sobre dicho enlace eliminaremos la clase que habíamos incluido.

Crear una página con una capa, un enlace y la definición de una clase CSS

El primer paso es construir una página con todos los elementos que queremos que formen parte de este primer ejemplo: la capa <div>, el enlace y la definición de la clase CSS. Además, ahora también vamos a incluir el script de JQuery, el cual necesitaremos para acceder a las funciones del framework Javascript.

Veamos la sintaxis.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo con JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.clasecss{
background-color: #ff8800;
font-weight: bold;
}
</style>
</head>
<body>
<div id="capa">
Esta capa es independiente, y añadiremos y quitaremos clases CSS sobre ella
</div>
<br /><br />
<a href="https://sutilweb.com">Añadir y quitar clases en la capa de arriba</a>
</body>
</html>

Ya tenemos la infraestructura necesaria para construir nuestro ejemplo, con todos los integrantes del mismo, ahora nos queda el siguiente paso que es añadir los comportamientos dinámicos con JQuery.

Recordar añadir siempre los scripts JQuery cuando el documento está ready

Para ello tenemos que incluir el siguiente código

$(document).ready(function(){
// INSTRUCCIONES QUE MODIFIQUEN EL DOM
});

Añadir los elementos mouseover y mouseout para añadir y quitar una clase CSS

Crearemos un par de eventos que asociaremos a los enlaces, dicho par de eventos serán lanzados cuando el usuario coloque el puntero del ratón sobre el enlace (mouseover) y cuando el usuario retire el ratón del enlace (mouseout). Por ejemplo, para definir un evento mouseover se tiene que llamar al método mouseover() sobre el elemento que queremos asociar al evento. Además al método mouseover() se le envía por parámetro una función con el código que se quiere ejecutar como respuesta a ese evento.

En el caso de añadir una clase, utilizaremos el método addClass(), el cual se tiene que invocar sobre el elemento al que queremos añadirle la clase. A addClass() tenemos que pasarle una cadena con el nombre de la clase CSS que queremos añadir.

Para seleccionar el elemento que queremos añadir la clase hacemos $("#miElemento"), es decir, utilizamos la función dólar pasándole el identificador del elemento que queremos seleccionar, predecida del carácter "#". Por ejemplo, con $("#capa") estamos seleccionando un elemento de la página cuyo id="capa".

$("a").mouseover(function(evento(){
$("#capa").addClass("clasecss")
});

De manera análoga, pero con el método mouseout(), definimos el evento para cuando el usuario saca el puntero del ratón del enlace.

$("a").mouseout(function(evento(){
$("#capa").removeClass("clasecss");
});

Código completo

Veamos como queda la sintaxis completa.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo con JQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.clasecss{
background-color: #ff8800;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(){
$("a").mouseover(function(evento){
$("#capa").addClass("clasecss")
})
$("a").mouseout(function(evento){
$("#capa").removeClass("clasecss");
})
});
</script>
</head>
<body>
<div id="capa">
Esta capa es independiente, y añadiremos y quitaremos clases CSS sobre ella
</div>
<br /><br />
<a href="https://sutilweb.com">Añadir y quitar clases en la capa de arriba</a>
</body>
</html>