Posso obter o url da imagem de fundo do div?

Question 1

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

É possível?

Question 2

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);
    });

Question 3

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);
});

Question 4

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"

Question 5

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);
})

Question 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);
});

Question 7

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
  }

Question 8

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, "");

Question 9

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

Answer 1

89

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

É possível?

jquery url html background-image jQuerybeast
fonte

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

Jason C,

Answer 2

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

Jason C,

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

1

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

Marcel

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

jQuerybeast

Answer 11

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

Mandeep Pasbola

Answer 12

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

jQuerybeast

Answer 13

@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

Answer 14

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

Answer 15

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"

Answer 16

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

Answer 17

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);
})

Answer 18

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

Answer 19

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

Answer 20

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

Abraham Murciano Benzadon

Answer 21

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

Answer 22

1

Funciona bem. Obrigado!

IndikatorDesign

Answer 23

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, "");

Answer 24

1

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

Ogg
fonte

Posso obter o url da imagem de fundo do div?

Respostas: