Kann ich die Hintergrundbild-URL von div erhalten?

87

Ich habe eine Schaltfläche, von der ich die background-imageURL benachrichtigen möchte, wenn ich darauf klicke #div1.

Ist es möglich?

jQuerybeast
quelle

Antworten:

186

Normalerweise bevorzuge ich .replace()reguläre Ausdrücke, wenn dies möglich ist, da es oft einfacher zu lesen ist: 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
quelle
4
Was ist, wenn die URL des Hintergrundbilds so etwas wie ist url(my%20picture%20Copy\(1\).jpg)? Ihr Ersetzen bewirkt, dass die Variable bg ist my%20picture%20Copy\(1\.jpg). Es werden auch keine Zitate entfernt (z url("the picture.jpg"). B. ).
Benjamin Manns
1
Dann müssen Sie entweder Code hinzufügen, um die %20Klammern zu entfernen, oder sich fragen, ob Sie sie dort überhaupt wirklich benötigt haben. Wenn Sie in einem Problem zitieren, verwenden Sie stattdessen die RobW -Lösung.
Blazemonger
1
Behandelt nicht mehrere Hintergrundbilder als Möglichkeit.
Marcel
1
@Marcel Einfach, wenn Sie nur Bilder haben; Teilen Sie einfach die Zeichenfolge in Kommas. Schwieriger, wenn Sie Dinge wie lineare Verläufe haben, da diese auch Kommas haben.
Blazemonger
1
Dies wird nicht funktionieren, wenn das Hintergrundbild so etwas wiebackground-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")
Glaspille
52

Ja, das ist möglich:

$("#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.
quelle
Ich möchte es alarmieren, um es nicht einzustellen. Benachrichtigen oder schreiben Sie den Pfad auf console.log
jQuerybeast
Um auf die Konsole zu schreiben, versuchen Sie: console.log ($ ('# div1'). css ('Hintergrundbild'))
Mandeep Pasbola
@RobW Danke. Das druckt URL (google.com) anstelle nur der Domain
jQuerybeast
@jQuerybeast Mein Code legt das CSS nicht fest. Die .cssMethode gibt den Wert einer Eigenschaft zurück, wenn sie mit einem Argument aufgerufen wird.
Rob W
2
@ Tim Nein, es ist nur genauer. Stellen Sie sich vor: background-image: url('photo(2012).png');Mit Ihrem Code erhalten Sie "'photo (2012.png')", was offensichtlich falsch ist.
Rob W
21

Ich habe die Antwort leicht verbessert, die erweiterte CSS-Definitionen behandelt wie:

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

JavaScript-Code:

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

Ergebnis:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
Michael Spector
quelle
Dies funktioniert nicht, wenn das Hintergrundbild so etwas wie ein Hintergrundbild ist: linearer Gradient (rgba (0,0,0,0,2), rgba (0,0,0,0,4)), URL (" mdn.mozillademos " .org / files / 7693 / catfront.png " )
Glaspille
10

Wie bereits erwähnt, kann die Blazemongers-Lösung keine Anführungszeichen entfernen (z. B. von Firefox zurückgegeben). Da ich Rob Ws Lösung als ziemlich kompliziert empfinde, füge ich hier meine 2 Cent hinzu:

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

Ich denke, dass die Verwendung eines regulären Ausdrucks dafür hauptsächlich aufgrund von fehlerhaft ist

  • Die Einfachheit der Aufgabe
  • Das Ausführen eines regulären Ausdrucks ist immer CPU-intensiver / länger als das Schneiden eines Strings.

Da die URL- Komponenten (" und ") konstant sind, schneiden Sie Ihre Zeichenfolge folgendermaßen ab:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});
Middletone
quelle
Sieht nach einer guten Lösung aus. In Safari funktioniert dies jedoch nicht. Mit diesem Ansatz erhalten Sie "ttps: //.....jp" anstelle von "https: //.....jpg".
IndikatorDesign
Ich glaube, die "s sind in dieser Syntax optional. url(myimg.jpg)funktioniert hier gut.
Abraham Murciano Benzadon
5

Ich benutze diesen

  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
quelle
1
Funktioniert gut. Vielen Dank!
IndikatorDesign
4

Hier ist eine einfache Regex, die das url("und ")aus der zurückgegebenen Zeichenfolge entfernt.

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

Mit nur einem Aufruf von replace(Regex-Version): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

Ogg
quelle