क्या मुझे div की पृष्ठभूमि-छवि url मिल सकती है?

88

मेरे पास एक बटन है, जब मैं इसे क्लिक करता हूं तो मैं background-imageURL को अलर्ट करना चाहता हूं #div1।

क्या यह संभव है?

क्या इससे आपके सवाल का जवाब मिलता है? पृष्ठभूमि-छवि संपत्ति से URL प्राप्त करें

— जेसन सी

188

मैं आमतौर पर .replace()जब संभव हो तो नियमित अभिव्यक्तियों को पसंद करता हूं , क्योंकि इसे पढ़ना अक्सर आसान होता है: http://jsfiddle.net/mblase75/z2kka/2

    $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        alert(bg);
    });

— Blazemonger
स्रोत

4

क्या होगा अगर बैकग्राउंड इमेज यूआरएल कुछ ऐसा है url(my%20picture%20Copy$1$.jpg)? आपकी जगह bg वैरिएबल होने का कारण बनता है my%20picture%20Copy\(1\.jpg)। यह भी उद्धृत नहीं करता है (जैसे url("the picture.jpg"))।

— बेंजामिन मानस

1

फिर आपको या तो %20कोष्ठक से बाहर निकलने और कोष्ठकों को जोड़ने के लिए कुछ कोड जोड़ना होगा , या अपने आप से पूछना होगा कि क्या वास्तव में आपको पहली जगह में उनकी आवश्यकता है। यदि किसी समस्या में उद्धृत करते हैं, तो इसके बजाय रॉब के समाधान का उपयोग करें।

— ब्लेज़ेमॉन्गर

1

एक संभावना के रूप में कई पृष्ठभूमि छवियों को संभाल नहीं करता है।

— मार्सेल

1

@ मार्सल आसान अगर आपके पास सिर्फ छवियां हैं; बस कॉमा पर स्ट्रिंग विभाजित करें। ट्रिकियर यदि आपके पास वहाँ लीनियर ग्रेडिएंट्स जैसी चीजें हैं , क्योंकि उनमें कॉमा भी हैं।

— ब्लेज़ेमॉन्गर

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

— शीशे का आवरण

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

— रॉब डब्ल्यू
स्रोत

मैं इसे सेट नहीं करने के लिए अलर्ट करना चाहता हूं।

— कंसोल

कंसोल पर लिखने का प्रयास करें: कंसोल.लॉग ($ ('# div1')। css ('बैकग्राउंड-इमेज'))

— मंदीप पासबोला

@RobW धन्यवाद। वह केवल डोमेन के बजाय url (google.com) को प्रिंट करता है

— jQuerybeast

@jQuerybeast मेरा कोड CSS सेट नहीं कर रहा है। .cssविधि जब एक तर्क के साथ लागू एक संपत्ति के मूल्य, देता है।

— रॉब डब्ल्यू

2

@tim नहीं, यह अधिक सटीक है। कल्पना करें: background-image: url('photo(2012).png');आपके बिट कोड के साथ, आपको "फोटो (2012.png ')" मिलेगा, जो स्पष्ट रूप से गलत है।

— रॉब डब्ल्यू

21

मेरे पास थोड़ा बेहतर उत्तर है, जो विस्तारित सीएसएस परिभाषाओं को संभालता है जैसे:

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

जावास्क्रिप्ट कोड:

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

परिणाम:

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

— माइकल स्पेक्टर
स्रोत

यह तब काम नहीं करेगा जब पृष्ठभूमि-छवि पृष्ठभूमि-छवि की तरह कुछ हो: रैखिक-ढाल (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos " .org / फ़ाइलें / 7693 / catfront.png " )

— ग्लास पाग

10

जैसा कि पहले ही उल्लेख किया गया है, ब्लेज़मॉन्गर्स समाधान उद्धरण को हटाने में विफल हो रहा है (जैसे फ़ायरफ़ॉक्स द्वारा लौटाया गया)। चूँकि मैं अपने 2 सेंट जोड़कर रोब डब्ल्यूएस समाधान को जटिल मानता हूं, इसलिए:

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

— अलेक्जेंडर प्रेसर
स्रोत

6

मुझे लगता है कि इसके लिए एक नियमित अभिव्यक्ति का उपयोग करना मुख्य रूप से दोषपूर्ण है

कार्य की सादगी
एक स्ट्रिंग को काटने की तुलना में एक नियमित अभिव्यक्ति चलाना हमेशा अधिक सीपीयू गहन / लंबा होता है।

चूंकि url (" और ") घटक स्थिर हैं, इसलिए अपनी स्ट्रिंग को इस तरह ट्रिम करें:

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

— स्वरक बीच
स्रोत

एक अच्छा समाधान की तरह लग रहा है। लेकिन यह सफारी में काम नहीं करता है। .. इस दृष्टिकोण के साथ आपको मिलता "ttps:: //.....jp" के बदले "//.....jpg https"

— IndikatorDesign

मेरा मानना है कि "इस वाक्य रचना में s वैकल्पिक हैं। url(myimg.jpg)यहाँ ठीक काम करता है।

— अब्राहम मर्सियानो बेंज़ादोन

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
  }

— Berty
स्रोत

1

ठीक काम करता है। धन्यवाद!

— इंडिकेटरडिजाइन

4

यहाँ एक सरल रेगेक्स है जो लौटे स्ट्रिंग से url("और हटा देगा ")।

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

— अब्राहम मर्सियानो बेंज़ादोन
स्रोत

1

replace(Regex संस्करण) में केवल एक कॉल का उपयोग करना : var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— ऑग
स्रोत