এই ম্যানুয়ালটি জাভাস্ক্রিপ্টে একটি সক্রিয় ক্লাস যোগ করার পদ্ধতি ব্যাখ্যা করবে।
কীভাবে জাভাস্ক্রিপ্টে অ্যাক্টিভ ক্লাস যুক্ত করবেন?
একটি সক্রিয় ক্লাস যোগ করতে, আমরা নিম্নলিখিত পদ্ধতি ব্যবহার করব:
আসুন প্রথম পদ্ধতির দিকে এগিয়ে যাই!
পদ্ধতি 1: জাভাস্ক্রিপ্টে সক্রিয় ক্লাস যোগ করতে classList.add() পদ্ধতির সাথে document.getElementById() ব্যবহার করুন
জাভাস্ক্রিপ্টে, ' document.getElementById() ” পদ্ধতিটি একটি নির্দিষ্ট উপাদানের আইডি দ্বারা অ্যাক্সেস করতে ব্যবহৃত হয়। যাইহোক, এটি শুধুমাত্র তাদের আইডির উপর ভিত্তি করে উপাদান নির্বাচন করে, ক্লাস নয়। আপনি এটি ব্যবহার করতে পারেন ' classList.add() জাভাস্ক্রিপ্টে একটি সক্রিয় ক্লাস যোগ করার পদ্ধতি।
আসুন একটি উদাহরণ গ্রহণ করে এই পদ্ধতিটি অন্বেষণ করি।
উদাহরণ
আমাদের HTML ফাইলে, আমরা নেব ' কিছু টেক্সট দিয়ে ট্যাগ করুন, এর আইডি হিসেবে উল্লেখ করুন txt ', এবং একটি যোগ করুন ' অনক্লিক 'ইভেন্ট যা ট্রিগার করবে' সক্রিয় () ' ফাংশন। মনে রাখবেন,
ট্যাগটি
ট্যাগের মধ্যে যোগ করুন: < পি আইডি = 'txt' অনক্লিক = 'সক্রিয়()' > এখানে আলতো চাপুন পি >JavaScript ফাইলে, activate() ফাংশনটিকে এমনভাবে সংজ্ঞায়িত করুন যাতে এটি প্রথমে document.getElementbyId() পদ্ধতিতে এর আইডি ব্যবহার করে অনুচ্ছেদ উপাদানটি অ্যাক্সেস করে। তারপর, স্টাইলিং উদ্দেশ্যে এর ক্লাস তালিকায় একটি CSS ক্লাস যুক্ত করুন:
ফাংশন সক্রিয় ( ) {
সেখানে একটি = নথি getElementById ( 'txt' ) ;
ক ক্লাসলিস্ট . যোগ করুন ( 'নতুন শ্রেণী' ) ;
}
CSS ফাইলে, “এর আগে একটি বিন্দু রাখুন নতুন ক্লাস ' এবং বরাদ্দ করুন ' পেছনের রং 'সম্পত্তি একটি মান' কমলা ”:
. নতুন ক্লাস {পটভূমি - রঙ : কমলা ;
}
ফলস্বরূপ, আপনি যখন অনুচ্ছেদ উপাদানটিতে ক্লিক করবেন, তখন যোগ করা ব্যাকগ্রাউন্ড সম্পত্তি এতে প্রয়োগ করা হবে:
চলুন নিচের পদ্ধতিটি দেখে নেওয়া যাক যেখানে আমরা একটি সক্রিয় ক্লাস যোগ করতে document.querySelector() ব্যবহার করব।
পদ্ধতি 2: জাভাস্ক্রিপ্টে সক্রিয় ক্লাস যোগ করতে classList.add() পদ্ধতির সাথে document.querySelector() ব্যবহার করুন
জাভাস্ক্রিপ্টে, ' document.querySelector() কোড থেকে প্রথম উপাদান পেতে পদ্ধতিটি ব্যবহার করা হয়। আপনি querySelector() পদ্ধতির মধ্যে ক্লাস এবং আইডি উভয়ই নির্দিষ্ট করতে পারেন। এটি ব্যবহার করা যেতে পারে ' classList.add() জাভাস্ক্রিপ্টে একটি সক্রিয় ক্লাস যোগ করার পদ্ধতি।
উদাহরণ
আমরা এখন শুধুমাত্র ব্যবহার করব ' document.querySelector() 'আইডি সহ' #txt ' অনুচ্ছেদ উপাদান নির্বাচন করতে. আবার, classList.add() পদ্ধতিটি সক্রিয় যোগ করতে ব্যবহার করা হবে “ নতুন ক্লাস ”:
ফাংশন সক্রিয় ( ) {সেখানে একটি = নথি querySelector ( '#txt' ) ;
ক ক্লাসলিস্ট . যোগ করুন ( 'নতুন শ্রেণী' ) ;
}
আউটপুট
আমরা জাভাস্ক্রিপ্টে সক্রিয় ক্লাস যোগ করার দুটি সহজ পদ্ধতি শিখেছি
উপসংহার
সক্রিয় ক্লাস যোগ করতে, আমরা ব্যবহার করতে পারি ' getElementById() 'বা' প্রশ্ন নির্বাচক() ” classList.add() পদ্ধতির সাথে। উল্লিখিত উভয় পদ্ধতিই প্রথমে তাদের আইডি দ্বারা উপাদানগুলি পায়, তারপর classList.add() পদ্ধতি ব্যবহার করে, উপাদানটির জন্য নির্ধারিত নতুন ক্লাস নাম যা স্টাইলিং উদ্দেশ্যে ব্যবহার করা যেতে পারে। এই পোস্টে জাভাস্ক্রিপ্টে একটি সক্রিয় ক্লাস যোগ করার পদ্ধতি বর্ণনা করা হয়েছে।