Posso obter o url da imagem de fundo do div?

89

Tenho um botão do qual, quando clico, desejo alertar o background-imageURL #div1.

É possível?

— jQuerybeast
fonte

Isso responde sua pergunta? Obter URL da propriedade background-image

— Jason C,

191

Normalmente prefiro .replace()expressões regulares quando possível, já que geralmente é mais fácil de ler: 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
fonte

4

E se o URL da imagem de plano de fundo for algo assim url(my%20picture%20Copy$1$.jpg)? Sua substituição faz com que a variável bg seja my%20picture%20Copy\(1\.jpg). Também não elimina as citações (por exemplo url("the picture.jpg")).

— Benjamin Manns

1

Então você terá que adicionar algum código para remover o escape dos %20parênteses e, ou se perguntar se você realmente precisava deles lá em primeiro lugar. Se estiver citando um problema, use a solução de RobW .

— Blazemonger

1

Não lida com várias imagens de fundo como uma possibilidade.

— Marcel

1

@Marcel Easy se você tiver apenas imagens; apenas divida a string entre vírgulas. Mais complicado se você tiver coisas como gradientes lineares , já que eles também têm vírgulas.

— Blazemonger

1

isso não funcionará se a imagem de fundo for algo como

background-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

Sim, isso é possível:

$("#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
fonte

Quero alertá-lo para não configurá-lo. Alerte ou escreva o caminho em console.log

— jQuerybeast

para escrever no console, tente: console.log ($ ('# div1'). css ('background-image'))

— Mandeep Pasbola

@RobW Obrigado. Isso imprime url (google.com) em vez de apenas o domínio

— jQuerybeast

@jQuerybeast Meu código não está configurando o CSS. O .cssmétodo retorna o valor de uma propriedade, quando invocado com um argumento.

— Rob W

2

@tim Não, é apenas mais preciso. Imagine: background-image: url('photo(2012).png');com o seu pedaço de código, você obterá "'photo (2012.png')", que é obviamente incorreto.

— Rob W

21

Eu melhorei um pouco a resposta, que lida com definições CSS estendidas 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
fonte

isso não funcionará se a imagem de fundo for algo como imagem de fundo: gradiente linear (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill de

10

Como já mencionado, a solução Blazemongers está falhando ao remover aspas (por exemplo, retornadas pelo Firefox). Já que acho a solução de Rob Ws bastante complicada, adiciono meus 2 centavos aqui:

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

— Alexander Presber
fonte

6

Eu acho que usar uma expressão regular para isso é falha principalmente devido a

A simplicidade da tarefa
A execução de uma expressão regular é sempre mais intensiva / longa da CPU do que cortar uma string.

Como os componentes url (" e ") são constantes, apare sua string da seguinte forma:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});

— Middletone
fonte

Parece uma boa solução. Mas isso não funciona no Safari. Com esta abordagem, você obtém "ttps: //.....jp" em vez de "https: //.....jpg" ..

— IndikatorDesign

Acredito que os "s são opcionais nesta sintaxe. url(myimg.jpg)funciona bem aqui.

— Abraham Murciano Benzadon

5

Estou 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
fonte

1

Funciona bem. Obrigado!

— IndikatorDesign

4

Aqui está um regex simples que removerá o url("e ")da string retornada.

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

— Abraham Murciano Benzadon
fonte

1

Usando apenas uma chamada para replace(versão regex): var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
fonte