Frage Kann ich die Hintergrundbild-URL von div bekommen?


Ich habe eine Schaltfläche, die ich, wenn ich darauf klicke, möchte ich die Hintergrundbild-URL von #div1.

Ist es möglich?


75
2018-01-10 20:12


Ursprung


Antworten:


Normalerweise bevorzuge ich .replace() wenn möglich, zu regulären Ausdrücken, 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);
    });

156
2018-01-10 20:26



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

47
2018-01-10 20:14



Ich habe eine etwas verbesserte Antwort, 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"

17
2018-05-21 13:12



Wie bereits erwähnt, kann die Lösung von Blazemergers keine Anführungszeichen entfernen (z. B. von Firefox zurückgegeben). Da ich Rob Ws Lösung ziemlich kompliziert finde, addiere hier meine 2 Cent:

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

8
2018-03-25 11:55



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

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

Seit der URL (" und ") Komponenten sind konstant, trimmen Sie Ihre Saite wie folgt:

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

5
2017-09-20 22:29



Ich benutze dieses

  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
  }

4
2017-10-27 15:32



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

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

2
2017-07-10 11:25



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


0
2018-02-14 12:33