Posso ottenere l'URL dell'immagine di sfondo di div?

88

Ho un pulsante di cui desidero avvisare l' background-imageURL quando lo faccio clic #div1.

È possibile?

— jQuerybeast
fonte

Questo risponde alla tua domanda? Ottieni l'URL dalla proprietà dell'immagine di sfondo

— Jason C

189

Di solito preferisco .replace()le espressioni regolari quando possibile, poiché spesso è più facile da leggere: 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 l'URL dell'immagine di sfondo fosse qualcosa di simile url(my%20picture%20Copy$1$.jpg)? La tua sostituzione fa sì che la variabile bg sia my%20picture%20Copy\(1\.jpg). Inoltre non elimina le citazioni (ad esempio url("the picture.jpg")).

— Benjamin Manns,

1

Quindi dovrai aggiungere del codice per annullare l'escape delle %20parentesi e o chiederti se ne avevi davvero bisogno lì in primo luogo. Se citi in un problema, usa invece la soluzione di RobW .

— Blazemonger

1

Non gestisce più immagini di sfondo come possibilità.

— Marcel

1

@ Marcel Easy se hai solo immagini; basta dividere la stringa tra virgole. Più complicato se ci sono cose come gradienti lineari , poiché anche quelli hanno virgole.

— Blazemonger

1

questo non funzionerà se l'immagine di sfondo è qualcosa del tipo

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

Sì, è possibile:

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

Voglio avvisarlo per non impostarlo.

— Avvisa

per scrivere su console prova: console.log ($ ('# div1'). css ('background-image'))

— Mandeep Pasbola

@ RobW Grazie. Questo stampa l'URL (google.com) invece del solo dominio

— jQuerybeast

@jQuerybeast Il mio codice non sta impostando il CSS. Il .cssmetodo restituisce il valore di una proprietà, se invocato con un argomento.

— Rob W

2

@tim No, è solo più preciso. Immagina: background-image: url('photo(2012).png');con il tuo codice, otterrai "'photo (2012.png')", che è ovviamente errato.

— Rob W

21

Ho una risposta leggermente migliorata, che gestisce definizioni CSS estese come:

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

Codice JavaScript:

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

Risultato:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"

— Michael Spector
fonte

questo non funzionerà se l'immagine di sfondo è qualcosa di simile all'immagine di sfondo: gradiente lineare (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill

10

Come già accennato, la soluzione Blazemongers non riesce a rimuovere le virgolette (ad esempio restituite da Firefox). Dal momento che trovo la soluzione di Rob Ws piuttosto complicata, aggiungo i miei 2 centesimi qui:

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

— Alexander Presber
fonte

6

Penso che l'utilizzo di un'espressione regolare per questo sia difettoso principalmente a causa di

La semplicità del compito
L'esecuzione di un'espressione regolare è sempre più intensiva / più lunga della CPU rispetto al taglio di una stringa.

Poiché i componenti url (" e ") sono costanti, ritaglia la stringa in questo modo:

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

— Middletone
fonte

Sembra una buona soluzione. Ma questo non funziona in Safari. Con questo approccio ottieni "ttps: //.....jp" invece di "https: //.....jpg" ..

— IndikatorDesign

Credo che le "s siano opzionali in questa sintassi. url(myimg.jpg)funziona bene qui.

— Abraham Murciano Benzadon

5

Sto usando questo

  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

Funziona bene. Grazie!

— IndikatorDesign

4

Ecco una semplice regex che rimuoverà url("e ")dalla stringa restituita.

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

— Abraham Murciano Benzadon
fonte

1

Utilizzando una sola chiamata a replace(versione regex): var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
fonte