এই অধ্যয়নটি জাভাস্ক্রিপ্টে পাঠ্যের রঙ পরিবর্তন করার পদ্ধতিগুলিকে চিত্রিত করবে।
কীভাবে জাভাস্ক্রিপ্টে পাঠ্যের রঙ পরিবর্তন করবেন?
জাভাস্ক্রিপ্টে টেক্সট কালার পরিবর্তন করার জন্য, নিচের পূর্বনির্ধারিত জাভাস্ক্রিপ্ট পদ্ধতি ব্যবহার করুন:
আসুন পৃথকভাবে এই পদ্ধতিগুলি ব্যাখ্যা করি।
পদ্ধতি 1: getElementById() পদ্ধতির সাথে style.color বৈশিষ্ট্য ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করুন
পাঠ্যের রঙ পরিবর্তন করতে, আপনি ' getElementById() 'সহ পদ্ধতি' style.color 'সম্পত্তি। এই ধরনের পরিস্থিতিতে, getElementById() পদ্ধতি ব্যবহার করে পাঠ্য উপাদানটি অ্যাক্সেস করা যেতে পারে এবং তারপরে HTML style.color প্রপার্টির সাহায্যে রঙের বৈশিষ্ট্য প্রয়োগ করুন।
বাক্য গঠন
getElementById() পদ্ধতির সাহায্যে রঙের বৈশিষ্ট্য ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করার জন্য প্রদত্ত সিনট্যাক্স ব্যবহার করুন:
নথি getElementById ( 'আইডি' ) . শৈলী . রঙ = 'রঙ' ;দ্য ' আইডি টেক্সট এলিমেন্ট অ্যাক্সেস করার জন্য এবং তারপর style.color প্রপার্টি ব্যবহার করে এর রঙ পরিবর্তন করতে এলিমেন্টের আইডি নির্দিষ্ট করা হয়েছে।
বর্ণিত ধারণা বুঝতে নীচের উদাহরণের দিকে যান!
উদাহরণ
প্রথমত, আমরা ব্যবহার করে একটি শিরোনাম তৈরি করব ট্যাগ করুন এবং একটি আইডি বরাদ্দ করুন ' আইডি ' যেটি h4 উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়, তারপর, একটি বোতাম তৈরি করুন যা 'নামক একটি ফাংশন আহ্বান করে রং পরিবর্তন() ' একটি JavaScript(JS) ফাইলে সংজ্ঞায়িত করা হয় যখন যোগ করা বোতামের অনক্লিক ইভেন্টটি ট্রিগার হয়:
< h4 আইডি = 'আইডি' > LinuxHint-এ স্বাগতম h4 >< বোতামের ধরন = 'বোতাম' অনক্লিক = 'রঙ পরিবর্তন()' > ম্যাজিক দেখতে ক্লিক করুন বোতাম >
JS ফাইলে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন রং পরিবর্তন() ” এবং getElementById() পদ্ধতিতে এর আইডি পাস করে শিরোনামটি পান এবং তারপরে এর রঙ পরিবর্তন করুন:
ফাংশন পরিবর্তন রঙ ( ) {নথি getElementById ( 'আইডি' ) . শৈলী . রঙ = 'লাল' ;
}
সবশেষে, HTML ফাইলে src ট্যাগ ব্যবহার করে জাভাস্ক্রিপ্ট ফাইলের উৎস উল্লেখ করুন:
< স্ক্রিপ্ট src = './JSfile.js' >> লিপি >এটি আউটপুট থেকে দেখা যায় যে যোগ করা বোতামটি ক্লিক করা হলে, পাঠ্য উপাদানটি তার রঙ পরিবর্তন করে ' লাল ”:
আসুন অন্য পদ্ধতি পরীক্ষা করে দেখুন!
পদ্ধতি 2: querySelector() পদ্ধতি সহ style.color প্রপার্টি ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করুন
আপনি ' ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করতে পারেন প্রশ্ন নির্বাচক() ' style.color সম্পত্তি সহ পদ্ধতি। এটি আইডি বা অ্যাসাইন করা ক্লাস উভয়ের সাথেই এলিমেন্ট অ্যাক্সেস করে যখন getElementById() মেথড শুধুমাত্র তার অ্যাসাইন করা আইডি দিয়ে উপাদানটিকে নিয়ে আসে।
বাক্য গঠন
querySelector() পদ্ধতির সাহায্যে রঙের বৈশিষ্ট্য ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করতে নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:
নথি querySelector ( 'id/className' ) . শৈলী . রঙ = 'রঙ' ;উদাহরণ
এখানে, আমরা ব্যবহার করব 'নামক ক্লাস সহ একটি অনুচ্ছেদ যোগ করতে ট্যাগ করুন রঙ ', যা
উপাদান এবং একটি বোতাম অ্যাক্সেস করতে সাহায্য করবে যা জাভাস্ক্রিপ্টকে কল করবে ' রং পরিবর্তন() ' পদ্ধতি যখন এটির অনক্লিক ইভেন্ট ট্রিগার হবে:
< পি ক্লাস = 'রঙ' > LinuxHint-এ স্বাগতম পি >< বোতামে ক্লিক করুন = 'রঙ পরিবর্তন()' > ম্যাজিক দেখতে ক্লিক করুন বোতাম >
এর সংজ্ঞায় ' রং পরিবর্তন() 'পদ্ধতি, আমরা আহ্বান করব ' প্রশ্ন নির্বাচক() ডট(.) সহ ক্লাসের নাম পাস করার পদ্ধতি যা নির্দেশ করে যে উপাদানটি তার শ্রেণীর নামের উপর ভিত্তি করে অ্যাক্সেস করা হয়েছে এবং তারপরে এটিতে রঙের বৈশিষ্ট্য প্রয়োগ করুন:
ফাংশন পরিবর্তন রঙ ( ) {নথি querySelector ( '.রঙ' ) . শৈলী . রঙ = 'ম্যাজেন্টা' ;
}
যাইহোক, একটি HTML উপাদানে একটি আইডি ব্যবহার করতে এবং querySelector() পদ্ধতি ব্যবহার করে এটি অ্যাক্সেস করতে, যোগ করুন “ # আইডি নাম দিয়ে সাইন ইন করুন:
নথি querySelector ( '#রঙ' ) . শৈলী . রঙ = 'ম্যাজেন্টা' ;আউটপুট
আমরা জাভাস্ক্রিপ্টে টেক্সট রঙ পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি সংগ্রহ করেছি।
উপসংহার
টেক্সট রঙ পরিবর্তন করার জন্য, আপনি getElementById() পদ্ধতি বা querySelector() পদ্ধতির সাহায্যে style.color প্রপার্টি ব্যবহার করতে পারেন। getElementById() পদ্ধতিটি তার নির্ধারিত আইডির উপর ভিত্তি করে HTML উপাদান অ্যাক্সেস করতে ব্যবহৃত হয়, যখন querySelector() পদ্ধতিটি যথাক্রমে (#) বা (.) চিহ্ন নির্দিষ্ট করে নির্ধারিত আইডি বা শ্রেণির উপর ভিত্তি করে উপাদান অ্যাক্সেস করে। এই অধ্যয়নটি জাভাস্ক্রিপ্টে পাঠ্যের রঙ পরিবর্তন করার সহজ পদ্ধতিকে চিত্রিত করেছে।