En este artículo, aprenderemos cómo obtener el color de fondo de una división en la que se hizo clic usando jQuery.
Enfoque: Todas las divisiones en la página se seleccionan primero usando un selector común y se aplica un enlace de clic para activar la detección de color usando el método click() . La división en la que se hace clic actualmente se puede encontrar usando esto como selector.
El método css() en jQuery se usa para obtener y configurar los estilos calculados del elemento en el que se usa. Acepta dos parámetros donde el primer parámetro define el estilo para el cual necesitamos obtener o establecer el estilo, y el segundo parámetro define el valor que debe establecerse. Podemos usar este método para obtener el color actual pasando el parámetro como «color de fondo» para obtener el color de fondo actual. Esto puede mostrarse como un texto en valores RGB o asignarse a otro elemento.
Sintaxis:
$(".box").click(function () {
// Get the current background color
let current_color =
$(this).css("background-color");
// Show the color text
$(".current-color-text").text(current_color);
// Show the color itself
$(".current-color").css(
"background-color", current_color
);
});
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<style>
.container {
display: flex;
}
.box {
height: 125px;
width: 125px;
margin-right: 16px;
}
.yellowgreen-bg {
background-color: yellowgreen;
}
.orangered-bg {
background-color: orangered;
}
.slateblue-bg {
background-color: slateblue;
}
.gold-bg {
background-color: gold;
}
.current-color {
height: 75px;
width: 75px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>How to get the background color of a
clicked division using jQuery?</b>
<p>
Click on any division to get its
background color
</p>
<div class="container">
<!-- Define the division's with
background color -->
<div class="box yellowgreen-bg"></div>
<div class="box orangered-bg"></div>
<div class="box slateblue-bg"></div>
<div class="box gold-bg"></div>
</div>
<p>The clicked division's background color is:</p>
<!-- Show the color and the text -->
<div class="current-color"></div>
<b class="current-color-text"></b>
<script>
$(".box").click(function () {
// Get the current background color
// using the css() method
let current_color =
$(this).css("background-color");
// Show the color text
$(".current-color-text").text(
current_color
);
// Show the color itself
$(".current-color").css(
"background-color", current_color
);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA