জাভাস্ক্রিপ্টে, এমন কিছু ওয়েব পৃষ্ঠা রয়েছে যেগুলির একটি আকর্ষণীয় বিন্যাস প্রয়োজন, যেমন অন্ধকার ব্যাকগ্রাউন্ড যা সাধারণত ইন্টারফেসের জন্য ভাল কাজ করে। একইভাবে, সাদা পটভূমি পাঠকদের বিষয়বস্তুর উপর ফোকাস করতে দেয়, এবং তাই নিউজ পোর্টাল বা ব্লগগুলি গাঢ় পাঠ্যের সাথে তুলনামূলকভাবে হালকা পটভূমি ব্যবহার করে। এই ধরনের ক্ষেত্রে, জাভাস্ক্রিপ্ট ফরম্যাটিং এবং ডকুমেন্ট ডিজাইনের উন্নতিতে খুব সহজ হয়ে ওঠে।
এই নিবন্ধটি জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করার পদ্ধতি নিয়ে আলোচনা করবে।
জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ কিভাবে পরিবর্তন করবেন?
জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করতে, নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করা যেতে পারে:
- ' ব্যাকগ্রাউন্ড ইমেজ 'এ সম্পত্তি' DOM ”
- ' getElementById() 'পদ্ধতি এবং' ব্যাকগ্রাউন্ড ইমেজ 'এ সম্পত্তি' অনুচ্ছেদ ”
একের পর এক আলোচিত পদ্ধতির মাধ্যমে যান!
পদ্ধতি 1: DOM-এ ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি ব্যবহার করে জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করুন।
দ্য ' ব্যাকগ্রাউন্ড ইমেজ ” সম্পত্তি নির্দিষ্ট উপাদানের পটভূমি চিত্র সামঞ্জস্য করে। এই কৌশলটি ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি প্রয়োগ করে এবং ব্যাকগ্রাউন্ড ইমেজটিকে একটি আর্গুমেন্ট হিসেবে এর পথ চিহ্নিত করে নির্দিষ্ট করে প্রয়োগ করা যেতে পারে।
বাক্য গঠন
উপরের সিনট্যাক্সে, ' URL ” ছবির পথ বোঝায়।
প্রদর্শনের জন্য নিম্নলিখিত উদাহরণটি দেখুন।
উদাহরণ
এই উদাহরণে, একটি বোতাম নির্দিষ্ট মান সহ অন্তর্ভুক্ত করা হবে এবং একটি ' অনক্লিক ” ইভেন্ট একটিতে পুনঃনির্দেশিত হচ্ছে
ব্যাকগ্রাউন্ড ইমেজ() নামের ফাংশন:
এখন, একটি ফাংশন ' ব্যাকগ্রাউন্ড ইমেজ() ঘোষণা করা হবে এবং ' document.body.style.backgroundImage ” সম্পত্তি তার আর্গুমেন্টে নির্দিষ্ট ইমেজ পাথ ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ অ্যাক্সেস করবে:
উপরের বাস্তবায়নের আউটপুট নিম্নরূপ হবে:
পদ্ধতি 2: অনুচ্ছেদে getElementById() পদ্ধতি এবং ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি ব্যবহার করে জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করুন
দ্য ' getElementById() ' পদ্ধতি একটি নির্দিষ্ট মান সহ একটি উপাদান প্রদান করে এবং ' ব্যাকগ্রাউন্ড ইমেজ ” সম্পত্তি, উপরে উল্লিখিত হিসাবে, তার আর্গুমেন্টে নির্দিষ্ট করা নির্দিষ্ট উপাদানের পটভূমি চিত্র প্রদান করে। এই পদ্ধতিটি নির্দিষ্ট অনুচ্ছেদের পটভূমিতে নির্দিষ্ট রঙ ম্যাপ করতে প্রয়োগ করা যেতে পারে।
বাক্য গঠন
এখানে, ' উপাদান ” একটি উপাদানের আইডি বোঝায়।
বর্ণিত ধারণাটি আরও ভালভাবে বোঝার জন্য নিম্নলিখিত উদাহরণটি দেখুন।
উদাহরণ
প্রথমে,
ট্যাগে একটি অনুচ্ছেদ অন্তর্ভুক্ত করুন এবং এটি একটি নির্দিষ্ট আইডি বরাদ্দ করুন:
এর পরে, পূর্ববর্তী পদ্ধতিতে আলোচনা করা হিসাবে ব্যাকগ্রাউন্ড ইমেজ() ফাংশন অ্যাক্সেস করার জন্য একটি অনক্লিক ইভেন্ট সহ একটি বোতাম তৈরি করুন:
সবশেষে, “নামের ফাংশনটি ঘোষণা করুন ব্যাকগ্রাউন্ড ইমেজ() একইভাবে। এখানে, ' ব্যবহার করে সংজ্ঞায়িত আইডি অ্যাক্সেস করুন getElementById() ” পদ্ধতি এবং এটিতে নির্দিষ্ট ব্যাকগ্রাউন্ড ইমেজ প্রয়োগ করুন। এর ফলে অনুচ্ছেদের পটভূমিতে রঙের বাস্তবায়ন হবে:
আউটপুট
আমরা জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করার জন্য সবচেয়ে সহজ পদ্ধতি কম্পাইল করেছি
উপসংহার
জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করতে, “ ব্যাকগ্রাউন্ড ইমেজ 'এ সম্পত্তি' DOM একটি ফাংশন ব্যবহার করে সমগ্র ওয়েব পৃষ্ঠায় নির্দিষ্ট ব্যাকগ্রাউন্ড ইমেজ প্রয়োগ করার জন্য বা ব্যবহার করে নির্দিষ্ট আইডি পাওয়ার জন্য ' getElementById() 'পদ্ধতি এবং প্রয়োগ' ব্যাকগ্রাউন্ড ইমেজ 'নির্দিষ্ট' উপর সম্পত্তি অনুচ্ছেদ ” এই ব্লগটি জাভাস্ক্রিপ্টে ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করার পদ্ধতিগুলি ব্যাখ্যা করে।