JQuery CSS সম্পত্তি ব্যবহার করে পটভূমি-চিত্র সেট করা

Question

আমার একটি imageUrlভেরিয়েবলের একটি চিত্র URL রয়েছে এবং আমি jQuery ব্যবহার করে এটি CSS স্টাইল হিসাবে সেট করার চেষ্টা করছি:

$('myObject').css('background-image', imageUrl);

এটি মনে হচ্ছে এটি কাজ করছে না:

console.log($('myObject').css('background-image'));

আয় none।

কোন ধারণা, আমি কি ভুল করছি?

Comments

বিষয়টি ঠিক কী? Jquery একটি ত্রুটি ছুড়েছে?

— মাইক_জি

না, এটি এটি সঠিকভাবে সেট করে না। আমি এটি লগ করছি এবং এটি ঠিক পরিবর্তন হচ্ছে না।

— ফাঁকা

প্রথমবারের জন্য jQuery ব্যবহারকারী কী বোঝাতে চেয়েছিল তা অনুমান করার চেষ্টা করে না।

— gblazex

Answer 1

আপনি সম্ভবত এটি চান (এটি একটি সাধারণ সিএসএস ব্যাকগ্রাউন্ড-চিত্র ঘোষণার মতো করতে):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

Comments

আমি এটি এইভাবে করছিলাম - তবে 'ইউআরএল' এবং বাম বন্ধনীগুলির মধ্যে একটি স্থান আমার কোডটি ব্যর্থ করে দিচ্ছিল। আপনার অনুলিপি করুন / আটকানো হয়েছে এবং বিষয়টি বুঝতে পেরেছেন। ধন্যবাদ!

— পিমার্টিন

আমি এই স্ক্রিপ্টে আপনার কোড ব্যবহার করছি তবে আমাকে পটভূমি-চিত্রটি পান: url ((অজানা)); এটি আমার স্ক্রিপ্ট: var bg_img = jQuery ('। Wp-show-পোষ্টস-অভ্যন্তরীণ')। অ্যাটর ('ডেটা-এসসিআর'); jQuery ('। wp-show-পোষ্টস-অভ্যন্তরীণ')। অন ('মাউসওভার', ফাংশন () {jQuery ('। হোম-ব্যানার। বিজি')। সিএসএস ('পটভূমি-চিত্র', 'ইউআরএল (' + বিজি_আইএমজি + ')');}); কোন ধারণা কেন?

— গ্যাস্টন করোলিও

Answer 2

আপনি চিত্রটির আগে এবং এর পরে ডাবল কোট (") অন্তর্ভুক্ত করতে চাইবেন:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

এইভাবে, যদি চিত্রটির স্পেস থাকে তবে এটি এখনও সম্পত্তি হিসাবে সেট করা হবে।

Comments

$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— সেক্ষেত্রে

দর প্রয়োজনীয় নয়: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullability

এটি আমার জন্য এটি সমাধান করেছে। আমার ডাবল উক্তি থাকা দরকার। আমার চিত্রের নামগুলিতে স্পেস রয়েছে। অন্যথায়, কিছুই ঘটবে না। আমি $('.myObject').css('background-color', 'green'); কাজ করার মতো কিছু পেতে পারি তবে ডাবল উদ্ধৃতি ছাড়াই চিত্রটি পরিবর্তন করতে পারি না। ধন্যবাদ!

— ভুত একো

encodeURIComponentযদি আপনার ইউআরএলটির কিছু অংশ ইতিমধ্যে ইউআরএল থেকে অবরুদ্ধ অক্ষরগুলি নিয়ে কাজ করে না। আপনি imageUrl সম্ভাব্য ডাবল উদ্ধৃতি চরিত্র পালায় যদিও:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— নিকোলাস Garnier

বাই বাই, $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');আমাকে দিয়েছিbackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— দেরিক

Answer 3

অন্যরা কীভাবে সঠিকভাবে পরামর্শ দিচ্ছে তার বিকল্প হিসাবে, আমি পৃথক সিএসএস সেটিংসের (বিশেষত ব্যাকগ্রাউন্ড চিত্রের URL গুলি) পরিবর্তে সিএসএস ক্লাসগুলি টগল করা সহজ মনে করি easier উদাহরণ স্বরূপ:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

Comments

জিনিসগুলি করার এটি একটি আরও ভাল উপায় কারণ এটি আপনাকে একটি সিএসএস প্রসেসর ব্যবহার করতে দেয়।

— কলম্বোডি

এটি দুর্দান্ত, আরও সরাসরি সমাধানের চেয়ে অনেক ভাল।

— ম্যাজিকোড

এটি যদিও উভয় চিত্র লোড হতে চলেছে।

— শেরিফডেরেক

এটি কি আসলে প্রস্তাবিত সমাধান? দেখে মনে হচ্ছে এটি অপ্রয়োজনীয়ভাবে আরও তথ্যের প্রয়োজন, যেমন তৃতীয় সম্ভাব্য পটভূমির চিত্র থাকলে আপনার অন্যান্য সমস্ত ব্যাকগ্রাউন্ড চিত্র অপসারণ করতে হবে, অথবা বিকল্পভাবে "বর্তমান" চিত্রটি ট্র্যাক করে রাখতে হবে। এবং কনফিগারেশনের বিশদ থাকতে হবে, যেমন .css ফাইলগুলিতে এই ইউআরআই আমাকে পাগল করে তোলে। : স্মাইলি: আমাকে সমস্ত কোডেই সন্ধান করতে হবে!

— আন ভ্যান রসম

এর মতো ক্লাস ব্যবহার করাও আমার পছন্দ, যেহেতু এটি আপনাকে কোড এবং শৈলীর মধ্যে একটি পরিষ্কার বিচ্ছিন্ন রাখতে দেয়। আমি তখন কোডটি নিয়ে গোলযোগ না করে সিএসএসে (মিডিয়া নির্বাচক এবং এর মাধ্যমে) আমার সমস্ত চিত্র এবং অ্যানিমেশনগুলি পরিবর্তন করতে পারি। আপনি যদি নিজের ছবিগুলি কোডের বাইরে রাখেন তবে আপনাকে সমস্ত কোডে সন্ধান করতে হবে না!

— ইভান ল্যাংলোইস

Answer 4

আমার কোডটি এখানে:

$ ('বডি')। সিএসএস ('পটভূমি-চিত্র', 'ইউআরএল ("/ এপিও / 1.jpg")');

উপভোগ করুন, বন্ধু

Answer 5

অন্যান্য উত্তরগুলির জন্য, আপনি "ব্যাকগ্রাউন্ড "ও ব্যবহার করতে পারেন। আপনি ব্যাকগ্রাউন্ডের মাধ্যমে চিত্রটি যেভাবে ব্যবহার করা হচ্ছে সে সম্পর্কিত অন্যান্য বৈশিষ্ট্যগুলি সেট করতে চাইলে এটি বিশেষত কার্যকর হয়:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

Comments

মূল উত্তরটি ব্যাকগ্রাউন্ড-ইমেজ নয়, ব্যাকগ্রাউন্ড ব্যবহার করেছে বলে ভেবেছিলাম এই উত্তরটি আরও তাত্পর্যপূর্ণ। আমি আরও উত্তর দেওয়ার জন্য আমার উত্তরটি পরিবর্তন করেছি এবং যাইহোক আমি উত্তরসূরির জন্য এখানে এখানে রেখে দেব।

— ম্যাট পার্কিনস

Answer 6

আসল ইউআরএল ব্যবহার করে এবং ভেরিয়েবল নয় তাদের জন্য:

$('myObject').css('background-image', 'url(../../example/url.html)');

Answer 7

"স্টাইল" বৈশিষ্ট্যটি পরিবর্তন করার চেষ্টা করুন:

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

Comments

অন্যান্য সমস্ত শৈলী প্রতিস্থাপন করবে। প্রস্তাবিত নয়

— মেলভিন

Answer 8

স্ট্রিং বিরতি উদ্ধার।

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

Answer 9

আমার যে সমস্যাটি হচ্ছিল তা হ'ল আমি মানটির ;শেষে একটি আধা-কোলন যুক্ত করে রেখেছি url()যা কোডটি কাজ করতে বাধা দিয়েছে।

কাজের কোড নয়:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

ওয়ার্কিং কোড:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

;ওয়ার্কিং কোডের শেষে বাদ দেওয়া আধা-কোলনটি লক্ষ্য করুন। আমি কেবল সঠিক বাক্য গঠন জানতাম না এবং এটি লক্ষ্য করা সত্যিই শক্ত। আশা করি এটি একই নৌকায় অন্য কাউকে সহায়তা করবে।

Answer 10

ভুলে যাবেন না যে jQuery CSS ফাংশনটি অবজেক্টগুলিকে পাস করার অনুমতি দেয় যা আপনাকে একই সাথে একাধিক আইটেম সেট করতে দেয়। উত্তর কোডটি এর পরে দেখতে হবে:

$(this).css({'background-image':'url(' + imageUrl + ')'})

Answer 11

$ ('myObject')। CSS (background 'পটভূমি-চিত্র': 'url (imgUrl)',});

Comments

এটি কাজ করবে না কারণ ইউআরএল একক উদ্ধৃতিতে আবদ্ধ।

— সাল