কাঁচা ভ্যানিলা জাভাস্ক্রিপ্টের সাথে একটি উপাদানে একাধিক শৈলী যোগ করা কিছুটা জটিল মনে হতে পারে। প্লেইন জাভাস্ক্রিপ্ট সহ স্টাইল উপাদানগুলির জন্য আমি সবচেয়ে সাধারণ পদ্ধতিটি দেখেছি হ'ল আপনার লক্ষ্য উপাদানটি দখল করা এবং তারপরে একবারে একটি স্টাইল যুক্ত করা:
// Grab target element (here via its class attribute)
const buttonAddToCart = document.querySelector(".button-add-to-cart")
// Add style properties, one at a time
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"এটি কাজ করে, কিন্তু এটি অপ্রয়োজনীয়, খুব বেশি পুনরাবৃত্তি আছে এবং আপনি আপনার কোড পুনরায় ব্যবহার করতে পারবেন না। এটি একটি নামযুক্ত ফাংশনের পরিবর্তে একটি বেনামী ফাংশন ব্যবহার করার মতো।
উপরেরটি করার পরিবর্তে, আপনি একটি স্টাইল অবজেক্ট ব্যবহার করতে পারেন:
// Create a style object
const buttonPrimary = {
backgroundColor: "#82b97e",
color: "#fff",
padding: "24px",
textTransform: "uppercase",
letterSpacing: "0.1em",
}
// Assign buttonPrimary (style object) to button element
Object.assign(buttonAddToCart.style, buttonPrimary)
এই পদ্ধতিটি কেবল পরিষ্কার নয়, আপনি এই buttonPrimary প্রয়োগ করতে পারেন প্রাথমিক বোতাম শৈলীর প্রয়োজন এমন যেকোন বোতাম উপাদানে শৈলী অবজেক্ট করুন এবং পুনরাবৃত্তিমূলক কোড লেখা এড়িয়ে চলুন।
একাধিক উপাদানে স্টাইল অবজেক্ট প্রয়োগ করার কোড উদাহরণ
অপেক্ষা করুন, কেন আপনি HTML স্টাইল করতে জাভাস্ক্রিপ্ট ব্যবহার করবেন CSS এর পরিবর্তে উপাদান?
দুঃখিত, আমি টোপ নিচ্ছি না, জেএস-এ সিএসএস বা জেএসএস, সিএসএস এবং জেএস দৃশ্যের মধ্যে একটি উত্তপ্ত বিষয়, কিন্তু এই লড়াইয়ে আমার কোনও কুকুর নেই। আমি উভয় পন্থা পছন্দ. আমি আপনাকে প্রসঙ্গ ব্যবহার করার পরামর্শ দিচ্ছি আপনি যে সিদ্ধান্তগুলি নেন তার পিছনে ড্রাইভার হিসাবে৷
তবে জাভাস্ক্রিপ্টের সাথে স্টাইলিং কখন কাজে আসতে পারে তার জন্য আমি একটি কেস করব। ধরা যাক আপনি এমন একটি পরিস্থিতিতে আছেন যেখানে আপনার CSS স্টাইলশীটে সরাসরি অ্যাক্সেস নেই যা একটি উপাদানের স্টাইলিংকে সংজ্ঞায়িত করে। এই পরিস্থিতিতে, জাভাস্ক্রিপ্টের সাথে বিদ্যমান শৈলীগুলিকে স্টাইল/ওভাররাইট করতে সক্ষম হওয়া আপনার ক্লায়েন্টের সমস্যা দ্রুত সমাধান করার মধ্যে পার্থক্য হতে পারে, অথবা সম্ভবত সেদিন এটি সমাধান না করা।
এই ধরনের পরিস্থিতিতে, জাভাস্ক্রিপ্টের বহুমুখিতা উজ্জ্বল হয়।
