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

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 wie

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

— 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