রক ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে একটি এলিমেন্টে একাধিক স্টাইল যোগ করা কিছুটা ক্লাঙ্কি লাগতে পারে। সাদা জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট স্টাইল করার সবচেয়ে সাধারণ পদ্ধতি যা আমি দেখেছি সেটি হচ্ছে আপনার টার্গেট এলিমেন্ট গ্র্যাব করা, এবং তারপর একবারে একটি স্টাইল যোগ করা:
// টার্গেট এলিমেন্ট গ্র্যাব করুন (এখানে এর ক্লাস অ্যাট্রিবিউট দিয়ে) const buttonAddToCart = document.querySelector(".button-add-to-cart") // স্টাইল প্রোপার্টিগুলো এক এক করে যোগ করুন buttonAddToCart.style.backgroundColor = "#82b97e" buttonAddToCart.style.color = "#fff" buttonAddToCart.style.padding = "24px" buttonAddToCart.style.textTransform = "uppercase" buttonAddToCart.style.letterSpacing = "0.1em"এটি কাজ করে, কিন্তু এটি রিডানড্যান্ট, বেশি রিপিটিশন, এবং আপনি আপনার কোড রিইউজ করতে পারবেন না। এটি একটু অনামাস ফাংশন ব্যবহার করার মত একটি নামড ফাংশনের বদলে।
এর বদলে, আপনি একটি স্টাইল অবজেক্ট ব্যবহার করতে পারেন:
// একটি স্টাইল অবজেক্ট তৈরি করুন const buttonPrimary = { backgroundColor: "#82b97e", color: "#fff", padding: "24px", textTransform: "uppercase", letterSpacing: "0.1em", } // buttonPrimary (স্টাইল অবজেক্ট) বাটন এলিমেন্টে এসাইন করুন Object.assign(buttonAddToCart.style, buttonPrimary)এই পদ্ধতিটি শুধু ক্লিনার নয়, বরং আপনি এই buttonPrimary স্টাইল অবজেক্টকে যেকোনো বাটন এলিমেন্টে যেটি প্রাইমারি বাটন স্টাইল দরকার সেটিতে অ্যাপ্লাই করতে পারেন, এবং রিপিটিটিভ কোড লিখতে থেকে বাঁচতে পারেন।
স্টাইল অবজেক্টকে একাধিক এলিমেন্টে অ্যাপ্লাই করার কোড উদাহরণ
রক, আপনি কেন CSS-এর বদলে জাভাস্ক্রিপ্ট দিয়ে HTML এলিমেন্ট স্টাইল করবেন?
দুঃখিত, আমি চারা নিচ্ছি না, CSS-in-JS বা JSS, CSS এবং JS কমিউনিটিতে একটি গরম টপিক, কিন্তু আমার কোনো পক্ষ নেই। আমি দুটি পদ্ধতিই পছন্দ করি। আমি আপনাকে কনটেক্সট-কে আপনার সিদ্ধান্তের ড্রাইভার হিসেবে ব্যবহার করার পরামর্শ দিই।
কিন্তু আমি একটি কেস তৈরি করব যখন জাভাস্ক্রিপ্ট দিয়ে স্টাইলিং কাজে আসতে পারে। মান লিন আপনি এমন একটি পরিস্থিতিতে আছেন যেখানে আপনার কাছে একটি এলিমেন্টে স্টাইলিং ডিফাইন করার CSS স্টাইলশিটে ডাইরেক্ট এক্সেস নেই। এই পরিস্থিতিতে, জাভাস্ক্রিপ্ট দিয়ে বিদ্যমান স্টাইল স্টাইল/ওভাররাইট করতে পারা আপনার ক্লায়েন্টের সমস্যা দ্রুত সমাধান করা এবং হয়তো সেদিন সমাধান না করার মধ্যে পার্থক্য সৃষ্টি করতে পারে।
এই টাইপের সিনেরিওতে, জাভাস্ক্রিপ্টের ভার্সাটিলিটি চমক জমায়।
