Div'in arka plan görüntüsü url'sini alabilir miyim?

89

Tıkladığımda background-imageURL'sini uyarmak istediğim bir düğmesi var#div1 .

Mümkün mü?

— jQuerybeast
kaynak

Bu sorunuzu yanıtlıyor mu? Arka plan resim Mülkiyet URL'yi alın

— Jason C

191

.replace()Okuması genellikle daha kolay olduğundan, genellikle mümkün olduğunda normal ifadeleri tercih ederim : 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
kaynak

4

Ya arka plan resmi URL'si buna benzerse url(my%20picture%20Copy$1$.jpg)? Değiştirmeniz bg değişkeninin olmasına neden olur my%20picture%20Copy\(1\.jpg). Ayrıca alıntı yapmaz (örneğin url("the picture.jpg")).

— Benjamin Manns

1

O zaman ya %20ve parantezleri kaldırmak için bazı kodlar eklemeniz ya da ilk etapta bunlara gerçekten ihtiyacınız olup olmadığını kendinize sormanız gerekir. Bir sorundan alıntı yapıyorsanız , bunun yerine RobW'un çözümünü kullanın.

— Blazemonger

1

Birden fazla arka plan görüntüsünü bir olasılık olarak işlemez.

— Marcel

1

@Marcel Easy, sadece resimleriniz varsa; dizeyi virgüllere ayırın. Doğrusal gradyanlar gibi şeyler varsa, bunların da virgül içerdiğinden daha zordur .

— Blazemonger

1

arka plan görüntüsü

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

— şuna benzerse

52

Evet, bu mümkün:

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

Ayarlamaması için uyarmak istiyorum.

— Console.log'daki

konsola yazmak için deneyin: console.log ($ ['# div1']. css ('background-image'))

— Mandeep Pasbola

@RobW Teşekkürler. Bu, yalnızca alan adı yerine url (google.com) yazdırır

— jQuerybeast

@jQuerybeast Kodum CSS'yi ayarlamıyor. .cssYöntem, bir bağımsız değişken ile çağrılan bir özelliğin değerini, döner.

— Rob W

2

@tim Hayır, sadece daha doğru. Düşünün: background-image: url('photo(2012).png');Kod parçanızla, açıkça yanlış olan "'fotoğraf (2012.png')" alacaksınız.

— Rob W

21

Aşağıdaki gibi genişletilmiş CSS tanımlarını işleyen biraz iyileştirilmiş cevabım var:

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 kodu:

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

Sonuç:

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

— Michael Spector
kaynak

arka plan görüntüsü arka plan görüntüsü gibi bir şeyse bu işe yaramaz: doğrusal gradyan (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill

10

Daha önce de belirtildiği gibi, Blazemongers çözümü teklifleri kaldıramıyor (örn. Firefox tarafından döndürüldü). Rob Ws çözümünü oldukça karmaşık bulduğum için, 2 sentimi buraya ekleyerek:

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

— Alexander Presber
kaynak

6

Bunun için normal bir ifade kullanmanın, temel olarak

Görevin basitliği
Normal bir ifadeyi çalıştırmak her zaman bir dizeyi kesmekten daha yoğun / daha uzundur.

Url (" ve ") bileşenleri sabit olduğundan, dizenizi şu şekilde kesin :

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

— Orta ton
kaynak

İyi bir çözüm gibi görünüyor. Ancak bu Safari'de çalışmıyor. Bu yaklaşımla "https: //.....jpg" yerine "ttps: //.....jp" elde edersiniz ..

— IndikatorDesign

"Bu sözdiziminde s'lerin isteğe bağlı olduğuna inanıyorum . url(myimg.jpg)burada iyi çalışıyor.

— Abraham Murciano Benzadon

5

Bunu kullanıyorum

  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
kaynak

1

İyi çalışıyor. Teşekkürler!

— IndikatorDesign

4

İşte döndürülen dizeden url("ve ")karakterlerini kaldıracak basit bir normal ifade .

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

— Abraham Murciano Benzadon
kaynak

1

replace(Regex sürümü) için yalnızca bir çağrı kullanma : var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
kaynak