Bisakah saya mendapatkan url gambar latar div?

89

Saya memiliki tombol yang ketika saya mengkliknya saya ingin memberitahukan background-imageURL-nya #div1.

Apa itu mungkin?

— jQuerybeast
sumber

Apakah ini menjawab pertanyaan Anda? Dapatkan URL dari Properti gambar latar belakang

— Jason C

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 seperti

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

— 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