ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টে ক্লাস যোগ করা

জাভাস্ক্রিপ্টের classList প্রোপার্টি মেথড add() ব্যবহার করে HTML এলিমেন্টে ক্লাস যোগ করা খুব সহজ। প্রথমে আমরা জেনেরিক ফর্মুলা দ্রুত দেখব — তারপর একটি প্র্যাকটিক্যাল উদাহরণ দিব।

ফর্মুলা

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

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

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

প্র্যাকটিক্যাল classList উদাহরণ

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

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

ফলাফল:

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

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

আপনি যেকোনো কাস্টম ক্লাস যোগ করতে classList add মেথড ব্যবহার করতে পারেন, যেকোনো CSS প্রোপার্টি ব্যবহার করে, রং থেকে ফন্ট সাইজ পর্যন্ত।

একই এলিমেন্টে একাধিক ক্লাস যোগ করা

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

var firstParagraph = document.querySelector("p") firstParagraph.classList.add("text-center", "text-xxl", "italic")

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

রিসোর্স

• MDN Web Docs element.classList