আমি কি ডিভের পটভূমি-চিত্রের url পেতে পারি?

89

আমার একটি বোতাম রয়েছে যার আমি এটি ক্লিক করলে আমি এর background-imageURL টি সতর্ক করতে চাই #div1।

এটা কি সম্ভব?

এটা কি তোমার প্রশ্নের উত্তর? ব্যাকগ্রাউন্ড-চিত্র সম্পত্তি থেকে URL পান

— জেসন সি

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

— ব্লেজমোনজার
সূত্র

4

ব্যাকগ্রাউন্ড ইমেজ ইউআরএল কিছু যদি হয় url(my%20picture%20Copy$1$.jpg)? আপনার প্রতিস্থাপনের ফলে বিজি ভেরিয়েবল হতে পারে my%20picture%20Copy\(1\.jpg)। এটি উদ্ধৃতি (উদাহরণস্বরূপ url("the picture.jpg")) ফালাটি দেয় না ।

— বেনিয়ামিন মানস

4

তারপরে আপনাকে হয় একটি %20এবং প্রথম বন্ধনীর হাত থেকে বাঁচতে কিছু কোড যুক্ত করতে হবে , অথবা নিজেকে সেখানে জিজ্ঞাসা করতে হবে যে সেখানে আপনাকে প্রথমে তাদের দরকার আছে কিনা। যদি কোনও সমস্যার উদ্ধৃতি দেওয়া হয়, তবে পরিবর্তে রবডাব্লু এর সমাধানটি ব্যবহার করুন।

— ব্লেজমোনজার

4

সম্ভাবনা হিসাবে একাধিক পটভূমি চিত্রগুলি পরিচালনা করে না।

— মার্সেল

4

@ মার্সেল সহজ আপনার যদি কেবল ছবি থাকে; শুধু কমাতে স্ট্রিং বিভক্ত। ট্রিকিয়ার যদি আপনার সেখানে রৈখিক গ্রেডিয়েন্টের মতো জিনিস থাকে তবে যেগুলিতে কমাও রয়েছে।

— ব্লেজমোনজার

4

ব্যাকগ্রাউন্ড-চিত্রটি এমন কিছু হলে এটি কাজ করবে না

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')। সিএসএস ('পটভূমি-চিত্র'))

— মনদীপ পাসবোলা

@ রবডব্লিউ আপনাকে ধন্যবাদ এটি কেবলমাত্র ডোমেনের পরিবর্তে url (google.com) মুদ্রণ করে

— jQuerybeast

@ jQuerybeast আমার কোডটি সিএসএস স্থাপন করছে না। .cssপদ্ধতি যখন কেউ যুক্তি দিয়ে প্রার্থনা একটি সম্পত্তি মান, ফেরৎ।

— রব ডাব্লু

4

@ টিম না, এটি আরও সঠিক। কল্পনা করুন: 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), আরজিবা (0,0,0,0.4)), ইউআরএল (" এমডিএন.মোজিলাডোমস " .org / ফাইলগুলি / 7693 / catfront.png " )

— গ্লাসপিল

10

ইতিমধ্যে উল্লিখিত হিসাবে, ব্লেজমোনজারস সমাধান উদ্ধৃতিগুলি অপসারণ করতে ব্যর্থ হচ্ছে (যেমন ফায়ারফক্স দ্বারা ফিরে এসেছে) returned যেহেতু আমি রব ডাব্লুএস এর সমাধানটিকে বরং জটিল বলে মনে করি, আমার 2 সেন্ট এখানে যুক্ত করছি:

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

— আলেকজান্ডার প্রিসবার
সূত্র

6

আমি মনে করি যে এর জন্য একটি নিয়মিত প্রকাশটি মূলত কারণে ত্রুটিযুক্ত

কাজের সরলতা
একটি নিয়মিত এক্সপ্রেশন চালানো সবসময় স্ট্রিং কাটার চেয়ে বেশি সিপিইউ নিবিড় / দীর্ঘ হয়।

যেহেতু ইউআরএল (" এবং ") উপাদান স্থির থাকে তাই আপনার স্ট্রিংটি এর মতো ছাঁটাই:

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

আমি বিশ্বাস করি যে "এই বাক্য গঠনতে চ্ছিক। 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
  }

— বার্টি
সূত্র

4

ঠিকভাবে কাজ করে. ধন্যবাদ!

— IndikatorDesign

4

এখানে একটি সরল রেজেক্স যা ফেরত স্ট্রিংটি থেকে url("এবং সরিয়ে দেবে ")।

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

— আব্রাহাম মার্সিয়ানো বেনজাদন
সূত্র

1

replace(রেজেেক্স সংস্করণ) এ কেবল একটি কল ব্যবহার করা হচ্ছে : var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— ওগ
সূত্র