La tarea es obtener la imagen de fondo de un div con jQuery. Puede lograr esta tarea usando el método CSS() en jQuery.
En palabras simples, necesitamos crear un div vacío y al hacer clic en el evento, el div vacío obtendrá la imagen como fondo.
CSS(): este es un método incorporado en jQuery para agregar la propiedad CSS, pero en este caso, debemos proporcionar la propiedad completa mediante el método URL() .
Sintaxis:
-
La siguiente sintaxis devolverá el valor de color de fondo del primer elemento coincidente.
css("property_name"); -
Esta sintaxis establecerá el valor de color de fondo para todos los elementos coincidentes.
$("p").css("background-color", "colorName");
URL(): esta es una función CSS que se usa para incluir un archivo. Acepta una URL de un solo parámetro en formato de string.
Sintaxis:
url(" <string> <url-modifier> ")
Ejemplo 1: Primero, crea un div vacío con un botón. Asigne ese botón al método CSS() en jQuery. Use una imagen para colocarla en el elemento div después de hacer clic en el botón.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.box {
width: 600px;
height: 500px;
border: 6px solid green;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var imageUrl = "gfg.jpg";
$(".box").css("background-image", "url(" + imageUrl + ")");
});
});
</script>
</head>
<body>
<div class="box"></div>
<p><button type="button">
click here to see the background img.
</button>
</p>
</body>
</html>
Producción:
- Antes de hacer clic:
- Después de hacer clic:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
.box {
width: 600px;
height: 500px;
border: 6px solid rgb(61, 65, 61);
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
var imageUrl = "g.jpg";
$(".box").css("background-image", "url(" + imageUrl + ")");
});
});
</script>
</head>
<body>
<div class="box"></div>
<p><button type="button">click here !!</button></p>
<style>
button {
background-color: blueviolet;
align-items: center;
margin-left: 250px;
}
</style>
</body>
</html>
Producción:
- Antes de hacer clic:
- Después de hacer clic:
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA