¿Puedo obtener la URL de la imagen de fondo de div?

Respuestas:

189

Por lo general, prefiero .replace()las expresiones regulares cuando es posible, ya que a menudo es más fácil de leer: http://jsfiddle.net/mblase75/z2jKA/2 

    $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        alert(bg);
    });
Blazemonger
fuente
4
¿Qué pasa si la URL de la imagen de fondo es algo así como url(my%20picture%20Copy\(1\).jpg)? Su reemplazo hace que la variable bg sea my%20picture%20Copy\(1\.jpg). Tampoco elimina las citas (por ejemplo url("the picture.jpg")).
Benjamin Manns
1
Luego, tendrá que agregar algún código para eliminar los %20paréntesis y, o preguntarse si realmente los necesitaba allí en primer lugar. Si cita un problema, utilice la solución de RobW en su lugar.
Blazemonger
1
No maneja múltiples imágenes de fondo como una posibilidad.
Marcel
1
@Marcel Easy si solo tiene imágenes; simplemente divida la cadena entre comas. Más complicado si tiene cosas como gradientes lineales allí, ya que también tienen comas.
Blazemonger
1
esto no funcionará si la imagen de fondo es algo así comobackground-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")
glasspill
52

Sí, eso es posible:

$("#id-of-button").click(function() {
    var bg_url = $('#div1').css('background-image');
    // ^ Either "none" or url("...urlhere..")
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
    alert(bg_url);
});
Rob W
fuente
Quiero alertarlo para que no lo configure. Alerta o escribe la ruta en
console.log
para escribir en la consola intente: console.log ($ ('# div1'). css ('background-image'))
Mandeep Pasbola
@RobW Gracias. Eso imprime la URL (google.com) en lugar de solo el dominio
jQuerybeast
@jQuerybeast Mi código no configura el CSS. El .cssmétodo devuelve el valor de una propiedad, cuando se invoca con un argumento.
Rob W
2
@tim No, es más preciso. Imagínese: background-image: url('photo(2012).png');con su fragmento de código, obtendrá "'foto (2012.png')", que obviamente es incorrecta.
Rob W
21

He mejorado ligeramente la respuesta, que maneja definiciones CSS extendidas como:

background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))

Código JavaScript:

var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

Resultado:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
Michael Spector
fuente
esto no funcionará si la imagen de fondo es algo así como background-image: linear-gradient (rgba (0,0,0,0,2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )
glasspill
10

Como ya se mencionó, la solución de Blazemongers no elimina las comillas (por ejemplo, las devuelve Firefox). Como encuentro que la solución de Rob Ws es bastante complicada, agrego mis 2 centavos aquí:

$('#div1').click (function(){
  url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  alert(url);
})
Alexander Presber
fuente
6

Creo que usar una expresión regular para esto es defectuoso principalmente debido a

  • La sencillez de la tarea
  • Ejecutar una expresión regular siempre requiere más CPU / más tiempo que cortar una cadena.

Dado que los componentes url (" y ") son constantes, recorta tu cadena así:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});
Middletone
fuente
Parece una buena solución. Pero esto no funciona en Safari. Con este enfoque, obtienes "ttps: //.....jp" en lugar de "https: //.....jpg" ..
IndikatorDesign
Creo que las "s son opcionales en esta sintaxis. url(myimg.jpg)funciona bien aquí.
Abraham Murciano Benzadon
5

Estoy usando este

  function getBackgroundImageUrl($element) {
    if (!($element instanceof jQuery)) {
      $element = $($element);
    }

    var imageUrl = $element.css('background-image');
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
  }
Berty
fuente
1
Funciona bien. ¡Gracias!
IndikatorDesign
4

Aquí hay una expresión regular simple que eliminará el url("y ")de la cadena devuelta.

var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");
Abraham Murciano Benzadon
fuente
1

Usando solo una llamada a replace(versión regex): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

Ogg
fuente