Czy mogę uzyskać adres URL obrazu tła div?

Odpowiedzi:

189

Zwykle wolę .replace()wyrażenia regularne, jeśli to możliwe, ponieważ często jest to łatwiejsze do odczytania: 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
źródło
4
Co się stanie, jeśli adres URL obrazu tła jest podobny url(my%20picture%20Copy\(1\).jpg)? Twoja zamiana spowoduje, że zmienna bg będzie my%20picture%20Copy\(1\.jpg). Nie usuwa też cytowania (np url("the picture.jpg").).
Benjamin Manns,
1
Następnie albo będziesz musiał dodać kod, aby cofnąć ucieczkę z %20nawiasów i, albo zadać sobie pytanie, czy naprawdę ich tam potrzebujesz. Jeśli cytujesz w problemie, użyj zamiast tego rozwiązania RobW .
Blazemonger
1
Nie obsługuje wielu obrazów tła jako możliwości.
Marcel
1
@ Marcel Easy, jeśli masz tylko obrazy; po prostu podziel ciąg na przecinki. Trudniejsze, jeśli masz tam rzeczy takie jak gradienty liniowe , ponieważ te również mają przecinki.
Blazemonger
1
to nie zadziała, jeśli obraz tła jest podobny dobackground-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

Tak, to możliwe:

$("#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
źródło
Chcę go ostrzec, żeby go nie ustawiać. Zaalarmuj lub napisz ścieżkę na console.log
jQuerybeast
pisać na konsoli spróbuj: console.log ($ ('# div1'). css ('background-image'))
Mandeep Pasbola
@RobW Dziękuję. To drukuje adres URL (google.com) zamiast tylko domeny
jQuerybeast
@jQuerybeast Mój kod nie ustawia CSS. .cssMetoda zwraca wartość właściwości, gdy wywołany z jednym argumentem.
Rob W,
2
@tim Nie, jest po prostu dokładniejszy. Wyobraź sobie: background-image: url('photo(2012).png');z fragmentem kodu otrzymasz „'zdjęcie (2012.png')”, co jest oczywiście niepoprawne.
Rob W
21

Mam nieco poprawioną odpowiedź, która obsługuje rozszerzone definicje CSS, takie jak:

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

Kod JavaScript:

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

Wynik:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
Michael Spector
źródło
to nie zadziała, jeśli obraz-tła jest czymś w rodzaju 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

Jak już wspomniano, rozwiązanie Blazemongers nie usuwa cudzysłowów (np. Zwracanych przez Firefox). Ponieważ uważam, że rozwiązanie Roba Ws jest dość skomplikowane, dodaję tutaj moje 2 centy:

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

Myślę, że użycie do tego wyrażenia regularnego jest błędne głównie z powodu

  • Prostota zadania
  • Uruchamianie wyrażenia regularnego jest zawsze bardziej intensywne / dłuższe niż wycinanie łańcucha.

Ponieważ komponenty url („ i ”) są stałe, przytnij ciąg w ten sposób:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});
Middletone
źródło
Wygląda na dobre rozwiązanie. Ale to nie działa w Safari. Przy takim podejściu otrzymujesz „ttps: //.....jp” zamiast „https: //.....jpg” ..
IndikatorDesign
Uważam, że "s są opcjonalne w tej składni. url(myimg.jpg)działa dobrze tutaj.
Abraham Murciano Benzadon
5

Używam tego

  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
źródło
1
Działa w porządku. Dzięki!
IndikatorDesign
4

Oto proste wyrażenie regularne, które usunie url("iz ")zwracanego ciągu.

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

Używając tylko jednego wywołania replace(wersja regex): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

Ogg
źródło