ขอ url ภาพพื้นหลังของ div ได้ไหม

89

ฉันมีปุ่มซึ่งเมื่อฉันคลิกฉันต้องการที่จะแจ้งเตือนbackground-imageURL #div1ของ

เป็นไปได้ไหม?

— jQuerybeast
แหล่งที่มา

สิ่งนี้ตอบคำถามของคุณหรือไม่? รับ URL จากคุณสมบัติภาพพื้นหลัง

— Jason C

191

ฉันมักจะชอบ.replace()นิพจน์ทั่วไปเมื่อเป็นไปได้เนื่องจากมักจะอ่านง่ายกว่า: 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
แหล่งที่มา

4

จะเป็นอย่างไรหาก URL ของภาพพื้นหลังเป็นurl(my%20picture%20Copy$1$.jpg)อย่างไร ของคุณแทนที่สาเหตุตัวแปร BG my%20picture%20Copy\(1\.jpg)ที่จะ นอกจากนี้ยังไม่ตัดการอ้างถึง (เช่นurl("the picture.jpg"))

— Benjamin Manns

1

จากนั้นคุณจะต้องเพิ่มรหัสเพื่อยกเลิกการหลีกเลี่ยง%20เครื่องหมายและวงเล็บหรือถามตัวเองว่าคุณต้องการมันจริงๆหรือไม่ หากอ้างถึงปัญหาให้ใช้วิธีแก้ปัญหาของRobWแทน

— Blazemonger

1

ไม่สามารถจัดการภาพพื้นหลังหลายภาพได้

— Marcel

1

@Marcel ง่ายถ้าคุณมีภาพ; เพียงแค่แยกสตริงในเครื่องหมายจุลภาค หากคุณมีสิ่งต่างๆเช่นการไล่ระดับสีเชิงเส้นตรงนั้นเนื่องจากสิ่งเหล่านี้มีเครื่องหมายจุลภาคด้วย

— Blazemonger

1

สิ่งนี้จะใช้ไม่ได้ถ้าภาพพื้นหลังเป็นแบบ

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

ใช่เป็นไปได้:

$("#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.
แหล่งที่มา

อยากแจ้งเตือนไม่ให้ตั้งค่า แจ้งเตือนหรือเขียนเส้นทางบน console.log

— jQuerybeast

เขียนบนคอนโซลลอง: console.log ($ ('# div1'). css ('background-image'))

— Mandeep Pasbola

@RobW ขอบคุณครับ ที่พิมพ์ url (google.com) แทนที่จะเป็นแค่โดเมน

— jQuerybeast

@jQuerybeast รหัสของฉันไม่ได้ตั้งค่า CSS .cssวิธีการส่งกลับค่าของสถานที่ให้บริการเมื่อเรียกด้วยอาร์กิวเมนต์หนึ่ง

— Rob W

2

@tim ไม่มันแม่นยำกว่า ลองนึกภาพ: background-image: url('photo(2012).png');เมื่อใช้รหัสของคุณคุณจะได้รับ "'photo (2012.png')" ซึ่งเห็นได้ชัดว่าไม่ถูกต้อง

— Rob W

21

ฉันได้ปรับปรุงคำตอบเล็กน้อยซึ่งจัดการคำจำกัดความ CSS เพิ่มเติมเช่น:

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:

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

ผลลัพธ์:

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

— ไมเคิลสเปคเตอร์
แหล่งที่มา

สิ่งนี้จะใช้ไม่ได้หากภาพพื้นหลังเป็นภาพพื้นหลัง: linear-gradient (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill

10

ดังที่ได้กล่าวไปแล้วโซลูชัน Blazemongers ไม่สามารถลบเครื่องหมายคำพูด (เช่นส่งคืนโดย Firefox) เนื่องจากฉันพบว่าโซลูชัน Rob Ws ค่อนข้างซับซ้อนจึงเพิ่ม 2 เซ็นต์ของฉันที่นี่:

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

— Alexander Presber
แหล่งที่มา

6

ฉันคิดว่าการใช้นิพจน์ทั่วไปสำหรับสิ่งนี้มีข้อผิดพลาดส่วนใหญ่เกิดจาก

ความเรียบง่ายของงาน
การรันนิพจน์ทั่วไปนั้น CPU จะเข้มข้น / ยาวกว่าการตัดสตริงเสมอ

เนื่องจากส่วนประกอบurl ("และ")คงที่ให้ตัดแต่งสตริงของคุณดังนี้:

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

— มิดเดิลโทน
แหล่งที่มา

ดูเหมือนเป็นทางออกที่ดี แต่สิ่งนี้ใช้ไม่ได้ใน Safari ด้วยวิธีนี้คุณจะได้รับ "ttps: //.....jp" แทน "https: //.....jpg" ..

— IndikatorDesign

ฉันเชื่อว่า"s เป็นทางเลือกในไวยากรณ์นี้ url(myimg.jpg)ทำงานได้ดีที่นี่

— Abraham Murciano Benzadon

5

ฉันกำลังใช้อันนี้

  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
  }

— เบอร์ตี้
แหล่งที่มา

1

ใช้งานได้ดี ขอบคุณ!

— IndikatorDesign

4

นี่คือนิพจน์ทั่วไปที่จะลบurl("และ")ออกจากสตริงที่ส่งคืน

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

— Abraham Murciano Benzadon
แหล่งที่มา

1

ใช้การโทรเพียงครั้งเดียวถึงreplace(เวอร์ชัน regex): var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
แหล่งที่มา