Bisakah saya mendapatkan url gambar latar div?

Jawaban:

191

Saya biasanya lebih memilih .replace()ekspresi reguler bila memungkinkan, karena seringkali lebih mudah dibaca: 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
sumber
4
Bagaimana jika URL gambar latar belakang seperti ini url(my%20picture%20Copy\(1\).jpg)? Ganti Anda menyebabkan variabel bg menjadi my%20picture%20Copy\(1\.jpg). Itu juga tidak menghapus kutipan (misalnya url("the picture.jpg")).
Benjamin Manns
1
Kemudian Anda harus menambahkan beberapa kode untuk melepaskan %20tanda kurung dan, atau bertanya pada diri sendiri apakah Anda benar-benar membutuhkannya di sana. Jika mengutip sebuah masalah, gunakan solusi RobW sebagai gantinya.
Blazemonger
1
Tidak menangani beberapa gambar latar belakang sebagai kemungkinan.
Marcel
1
@Marcel Mudah jika Anda hanya memiliki gambar; pisahkan string dengan koma. Lebih rumit jika Anda memiliki hal-hal seperti gradien linier di sana, karena itu juga memiliki koma.
Blazemonger
1
ini tidak akan berfungsi jika gambar latar belakangnya sepertibackground-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

Ya, itu mungkin:

$("#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.
sumber
Saya ingin memperingatkannya untuk tidak menyetelnya. Waspada atau tulis jalur di console.log
jQuerybeast
untuk menulis di konsol coba: console.log ($ ('# div1'). css ('background-image'))
Mandeep Pasbola
@RobW Terima kasih. Itu mencetak url (google.com), bukan hanya domainnya
jQuerybeast
@jQuerybeast Kode saya tidak menyetel CSS. The .cssMetode mengembalikan nilai properti, ketika dijalankan dengan satu argumen.
Rob W
2
@tim Tidak, itu hanya lebih akurat. Bayangkan: background-image: url('photo(2012).png');Dengan sedikit kode Anda, Anda akan mendapatkan "'photo (2012.png')", yang jelas salah.
Rob W
21

Saya memiliki jawaban yang sedikit lebih baik, yang menangani definisi CSS yang diperluas seperti:

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

Kode JavaScript:

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

Hasil:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
Michael Spector
sumber
ini tidak akan berfungsi jika gambar latar adalah sesuatu seperti gambar latar belakang: gradien-linier (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )
glasspill
10

Seperti yang sudah disebutkan, solusi Blazemongers gagal menghapus tanda kutip (mis. Dikembalikan oleh Firefox). Karena saya menemukan solusi Rob Ws menjadi agak rumit, menambahkan 2 sen saya di sini:

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

Saya pikir menggunakan ekspresi reguler untuk ini salah terutama karena

  • Kesederhanaan tugas
  • Menjalankan ekspresi reguler selalu lebih intensif / lebih lama daripada memotong string.

Karena komponen url (" dan ") konstan, potong string Anda seperti ini:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});
Middletone
sumber
Sepertinya solusi yang bagus. Tetapi ini tidak berfungsi di Safari. Dengan pendekatan ini Anda mendapatkan "ttps: //.....jp" bukan "https: //.....jpg" ..
IndikatorDesign
Saya yakin "s adalah opsional dalam sintaks ini. url(myimg.jpg)bekerja dengan baik di sini.
Abraham Murciano Benzadon
5

Saya menggunakan yang ini

  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
sumber
1
Bekerja dengan baik. Terima kasih!
IndikatorDesign
4

Berikut ini regex sederhana yang akan menghapus url("dan ")dari string yang dikembalikan.

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

Hanya menggunakan satu panggilan ke replace(versi regex): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

Ogg
sumber