En este artículo veremos cómo cambiar el color de fondo de un párrafo usando jQuery. Para cambiar el color de fondo, usamos el método on(). El método on() se usa para escuchar el evento en un elemento. Aquí vamos a utilizar el evento dblclick . Para cambiar el color de fondo vamos a utilizar el método css(). Este método nos ayuda a agregar propiedades CSS de forma dinámica. Para obtener más detalles, puede consultar este artículo .
Sintaxis:
$("p").on({
dblclick: function(){
$(this).css("property", "value");
}
});
Aquí hemos creado un párrafo dentro de la etiqueta del cuerpo, es decir, el elemento <p>. Agregamos un evento de doble clic en él. Si alguien hace doble clic en ese párrafo, el color de fondo cambiará según el valor dado.
Ejemplo 1: En este ejemplo, vamos a utilizar el método css() que agrega dinámicamente el color de fondo a nuestro elemento de párrafo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var toggle = true; // Toggle state
$("p").on({
dblclick: function () {
if (toggle) {
// Change background to red
$(this).css("background-color", "red");
toggle = false;
} else {
// Change background to default
$(this).css("background-color", "white");
toggle = true;
}
}
});
});
</script>
</head>
<body>
<p>Double click to change background color</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, vamos a utilizar el método addClass() y removeClass() para agregar o eliminar CSS dinámicamente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<style>
.toggle {
background-color: green;
}
</style>
<script>
$(document).ready(function () {
var toggle = true; // Toggle state
$("p").on({
dblclick: function () {
if (toggle) {
// Add class toggle to the paragraph
$(this).addClass("toggle");
toggle = false;
} else {
// Remove class toggle to the paragraph
$(this).removeClass("toggle");
toggle = true;
}
}
});
});
</script>
</head>
<body>
<p>Hello GeeksforGeeks</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA