এই পোস্টটি HTML DOM স্টাইল 'ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টির কাজ এবং ব্যবহার সম্পর্কে লেখা আছে।
জাভাস্ক্রিপ্টে এইচটিএমএল ডম স্টাইল 'ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টি কীভাবে ব্যবহার করবেন?
HTML DOM শৈলী ' ব্যাকগ্রাউন্ড ইমেজ HTML এলিমেন্ট এবং ডকুমেন্ট কাস্টমাইজ করার জন্য প্রপার্টি ব্যবহার করা হয় এর পাথ উল্লেখ করে একটি ব্যাকগ্রাউন্ড ইমেজ যুক্ত করে।
সিনট্যাক্স ('ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টি সেট করা)
বস্তু শৈলী . ব্যাকগ্রাউন্ড ইমেজ = 'ইউআরএল('ইউআরএল')|কোনও না|প্রাথমিক|উত্তরাধিকার'উপরের সিনট্যাক্স নিম্নলিখিত 'ব্যাকগ্রাউন্ড ইমেজ' সম্পত্তি মান সমর্থন করে:
- url('URL'): এটি পছন্দসই পটভূমি চিত্রের অবস্থান নির্দিষ্ট করে।
- কোনোটিই না এটি ডিফল্ট মানকে উপস্থাপন করে যেমন, কোনো পটভূমি চিত্র নেই।
- প্রাথমিক: এটি ব্রাউজারের ডিফল্ট মানের অনুরূপ।
- উত্তরাধিকার: এটি তার মূল উপাদান থেকে সম্পত্তি উত্তরাধিকারসূত্রে পায়।
সিনট্যাক্স ('ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টির রিটার্নিং ইউআরএল)
বস্তু শৈলী . ব্যাকগ্রাউন্ড ইমেজএই সিনট্যাক্স যোগ করা ব্যাকগ্রাউন্ড ইমেজের URL ধারণকারী স্ট্রিং মান প্রদান করে।
চলুন স্টাইল 'ব্যাকগ্রাউন্ড ইমেজ' বৈশিষ্ট্যের ব্যবহার ব্যাখ্যা করতে ব্যবহারিকভাবে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করি।
উদাহরণ 1: ব্যাকগ্রাউন্ড ইমেজ সেট করতে স্টাইল 'ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টি প্রয়োগ করুন
এই উদাহরণ শৈলী প্রযোজ্য ' ব্যাকগ্রাউন্ড ইমেজ ডকুমেন্টের ইউআরএল উল্লেখ করে পছন্দসই ব্যাকগ্রাউন্ড ইমেজ সেট করতে প্রপার্টি।
HTML কোড
প্রথমে, বর্ণিত HTML কোডটি দেখুন:
< h2 > ব্যবহার করুন এইচটিএমএল DOM শৈলী জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি h2 >
< বোতামে ক্লিক করুন = 'myFunc()' > এখানে ক্লিক করুন বোতাম >
এই কোডে:
- দ্য ' ” ট্যাগ লেভেল 2 এর উপশিরোনাম যোগ করে।
- দ্য ' <বোতাম> ' ট্যাগ একটি সংযুক্ত একটি বোতাম তৈরি করে ' অনক্লিক 'ফাংশন চালানোর জন্য ইভেন্ট' myFunc() ” বোতামে ক্লিক করুন।
জাভাস্ক্রিপ্ট কোড
পরবর্তী, প্রদত্ত জাভাস্ক্রিপ্ট কোড অনুসরণ করুন:
< লিপি >ফাংশন myFunc ( ) {
নথি শরীর . শৈলী . ব্যাকগ্রাউন্ড ইমেজ = 'url('./html&css/image.jpg')' ;
}
লিপি >
উপরের কোড স্নিপেটে:
- ফাংশনটির নাম ' myFunc() ' সংজ্ঞায়িত করা.
- এর সংজ্ঞায়, ' style.backgroundImage 'সম্পত্তি নির্দিষ্ট প্রযোজ্য' URL পুরো নথির পটভূমিতে চিত্র।
আউটপুট
আউটপুট দেখায় যে পটভূমি চিত্রটি বোতাম ক্লিক করার পরে পুরো নথিতে যোগ করা হয়েছে।
উদাহরণ 2: ব্যাকগ্রাউন্ড ইমেজের ইউআরএল ফেরত দিতে স্টাইল 'ব্যাকগ্রাউন্ড ইমেজ' প্রপার্টি প্রয়োগ করুন
দ্য ' ব্যাকগ্রাউন্ড ইমেজ ” প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের URL ফেরত দিতেও উপকারী। আসুন এটি ব্যবহারিকভাবে দেখি।
HTML কোড
প্রথমত, লিখিত HTML কোডের মাধ্যমে যান:
< h2 > ব্যবহার করুন এইচটিএমএল DOM শৈলী জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি h2 >< ডিভি আইডি = 'myDiv' শৈলী = 'উচ্চতা: 500px; প্রস্থ: 500px;
সীমানা: 3px কঠিন কালো;ব্যাকগ্রাউন্ড-ইমেজ:url('./html&css/image.jpg')' > এই একটি div হয় div >
< h4 আইডি = 'ডেমো' >> h4 >
উপরের কোড ব্লকে:
- দ্য ' ব্যাকগ্রাউন্ড ইমেজ ' প্রপার্টি '' এলিমেন্টে ব্যবহার করা হয় যা প্রদত্ত ইউআরএলের সাথে সম্পর্কিত একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করে।
- দ্য ' ” উপাদানটি লেভেল 4 এর একটি খালি উপশিরোনাম তৈরি করে যা যোগ করা ব্যাকগ্রাউন্ড ইমেজের প্রত্যাবর্তিত মান (URL) প্রদর্শন করে।
জাভাস্ক্রিপ্ট কোড
এখন, জাভাস্ক্রিপ্ট কোডে এগিয়ে যান:
< লিপি >
যাক img = নথি getElementById ( 'myDiv' ) . শৈলী . ব্যাকগ্রাউন্ড ইমেজ ;
নথি getElementById ( 'ডেমো' ) . innerHTML = img ;
লিপি >এই কোড ব্লকে:
- পরিবর্তনশীল ঘোষণা করুন ' img 'যা ব্যবহার করে' document.getElementById() ' এর আইডি 'myDiv' এর মাধ্যমে '' উপাদানটি অ্যাক্সেস করার পদ্ধতি এবং 'এর মাধ্যমে একটি পটভূমি চিত্র প্রয়োগ করে ব্যাকগ্রাউন্ড ইমেজ 'সম্পত্তি।
- এরপরে, 'document.getElementById()' পদ্ধতিটি সংযুক্ত ব্যাকগ্রাউন্ড ইমেজের URL প্রদর্শন করতে তার আইডি 'ডেমো' ব্যবহার করে খালি উপশিরোনাম নিয়ে আসে।
আউটপুট
আউটপুট 'div' উপাদানে প্রয়োগ করা পটভূমি চিত্রের URL প্রদর্শন করে।
উপসংহার
জাভাস্ক্রিপ্ট শৈলী ব্যবহার করে ' ব্যাকগ্রাউন্ড ইমেজ ” পছন্দসই HTML উপাদানে ব্যাকগ্রাউন্ড ইমেজ বরাদ্দ করার বা এর URL ফেরত দেওয়ার জন্য সম্পত্তি। এটি 'প্রাথমিক', 'উত্তরাধিকারী', 'ইউআরএল', এবং 'কোনোটি' সহ পটভূমি চিত্র সেট করতে চারটি সম্পত্তি মান সমর্থন করে। যাইহোক, এটি ব্যাকগ্রাউন্ড ইমেজের URL পাওয়ার জন্য কোনো মান সমর্থন করে না। এই পোস্টটি জাভাস্ক্রিপ্টে HTML DOM শৈলী 'ব্যাকগ্রাউন্ড ইমেজ' বৈশিষ্ট্য ব্যবহার করার জন্য একটি সংক্ষিপ্ত বিবরণ প্রদান করেছে।