ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে কীভাবে একটি উপাদানে একটি ক্লাস যুক্ত করবেন

JavaScript এর classList প্রপার্টি পদ্ধতি,add() ব্যবহার করার সময় একটি HTML উপাদানে একটি ক্লাস যোগ করা সহজ . প্রথমে, আমরা জেনেরিক সূত্রটি দ্রুত দেখে নিই — এবং একটি বাস্তব উদাহরণ সহ অনুসরণ করি।

সূত্র

var element = document.querySelector("selector")
element.classList.add("class")

উপরের জেনেরিক উদাহরণে, আমরা প্রথম HTML উপাদান খুঁজে পাই নির্দিষ্টনির্বাচকের নাম সহ একটি পৃষ্ঠায়৷ (এটি একটি উপাদান নির্বাচক, শ্রেণি নির্বাচক, ইত্যাদি হতে পারে) এবং একটি পরিবর্তনশীল সহ এটির একটি রেফারেন্স সংরক্ষণ করুন৷

তারপর আমরা classList প্রপার্টি সংযুক্ত করি add() উপাদানটিতে মেথড এবং আমরা যে ক্লাসটি যোগ করতে চাই তা নির্দিষ্ট করুন।

ব্যবহারিক ক্লাসলিস্ট উদাহরণ

চলুন এই পৃষ্ঠায় আপনি এখনই পড়ছেন এমন প্রথম অনুচ্ছেদ উপাদানটি খুঁজে বের করার চেষ্টা করুন এবং এটিকে bg-red এর একটি ক্লাস দিন .

var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")

এবং ফলাফল:

দ্রষ্টব্য:আমার কাছে bg-red আছে আমার ওয়েবসাইটের CSS স্টাইলশীটে ক্লাস, তাই এটি কাজ করে। ক্লাসটি এইরকম দেখাচ্ছে:

.bg-red {
  background-color: #cf4b32;
}

আপনি যেকোনও কাস্টম ক্লাস যোগ করতে ক্লাসলিস্ট অ্যাড পদ্ধতি ব্যবহার করতে পারেন, যেকোনও সিএসএস প্রপার্টি ব্যবহার করে রঙ থেকে ফন্ট সাইজ পর্যন্ত।

একই উপাদানে একাধিক ক্লাস যোগ করুন

আপনি সহজেই একই সময়ে আপনার টার্গেট এলিমেন্টে অসংখ্য ক্লাস যোগ করতে পারেন। আসুন আমাদের প্রথম অনুচ্ছেদ উপাদানে 3টি ক্লাস যোগ করার চেষ্টা করি:

var firstParagraph = document.querySelector("p")

firstParagraph.classList.add("text-center", "text-xxl", "italic")

এটি এই পৃষ্ঠার প্রথম অনুচ্ছেদটিকে কেন্দ্রে সারিবদ্ধ করবে এবং এটিকে একটি বড় ফন্টের আকার দেবে এবং এটিকে তির্যক আকার দেবে। নিজে চেষ্টা করে দেখুন।

সম্পদ

• MDN ওয়েব ডক্স element.classList