এই নিবন্ধটি জাভাস্ক্রিপ্টের সাথে CSS যোগ করার পদ্ধতিগুলি বর্ণনা করবে।
কিভাবে জাভাস্ক্রিপ্ট দিয়ে CSS যোগ করবেন?
জাভাস্ক্রিপ্টে, আপনি নিম্নলিখিত পদ্ধতি বা পন্থা ব্যবহার করে একটি উপাদানের শৈলী বৈশিষ্ট্য পরিবর্তন করে CSS শৈলী যোগ করতে পারেন:
- শৈলী ইনলাইন স্টাইলিং হিসাবে সম্পত্তি
- setAttribute() পদ্ধতি ইনলাইন স্টাইলিং হিসাবে
- createElement() মেথড একটি গ্লোবাল স্টাইলিং হিসাবে
পদ্ধতি 1: 'স্টাইল' প্রপার্টি ব্যবহার করে জাভাস্ক্রিপ্টের সাথে CSS যোগ করুন
জাভাস্ক্রিপ্টে CSS যোগ করার জন্য, ' শৈলী 'সম্পত্তি। এটি একটি উপাদানের ইনলাইন শৈলী অ্যাক্সেস এবং ম্যানিপুলেট করার জন্য ব্যবহার করা হয়। এটি একটি বস্তু দেয় যা একটি উপাদানের ইনলাইন শৈলী প্রতিনিধিত্ব করে এবং একজনকে পৃথক শৈলী বৈশিষ্ট্যগুলি পেতে বা সেট করতে দেয়।
বাক্য গঠন
জাভাস্ক্রিপ্টে CSS শৈলী যোগ করার জন্য, নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয় ' শৈলী 'সম্পত্তি:
উপাদান শৈলী ;
এখানে, ' উপাদান ” একটি HTML উপাদানের একটি রেফারেন্স।
উদাহরণ
নিম্নলিখিত উদাহরণে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে বোতাম স্টাইল করব। প্রথমত, আমরা তিনটি বোতাম তৈরি করব এবং তাদের জন্য আইডি বরাদ্দ করব, যা স্টাইলের জন্য বোতাম উপাদানগুলি অ্যাক্সেস করতে সহায়তা করে:
< বোতাম আইডি = 'btn2' > প্রত্যাখ্যান করুন বোতাম >
< বোতাম আইডি = 'btn3' > গ্রহণ করুন বোতাম >
স্টাইল করার আগে আউটপুটটি এরকম দেখাবে:
এখন, এই বোতামগুলিকে জাভাস্ক্রিপ্টে স্টাইল করা যাক “ শৈলী 'সম্পত্তি। প্রথমে, 'এর সাহায্যে তাদের নির্ধারিত আইডি ব্যবহার করে সমস্ত বোতাম উপাদানগুলি পান getElementById() 'পদ্ধতি:
সম্মত হতে দিন = নথি getElementById ( 'btn1' ) ;প্রত্যাখ্যান করা যাক = নথি getElementById ( 'btn2' ) ;
গ্রহণ করা যাক = নথি getElementById ( 'btn3' ) ;
'' ব্যবহার করে এই সমস্ত বোতামগুলির পটভূমির রঙ সেট করুন শৈলী 'সম্পত্তি:
একমত শৈলী . পেছনের রং = 'সবুজ' ;প্রত্যাখ্যান শৈলী . পেছনের রং = 'লাল' ;
গ্রহণ শৈলী . পেছনের রং = 'হলুদ' ;
আপনি দেখতে পাচ্ছেন, বোতামগুলি সফলভাবে ব্যবহার করে স্টাইল করা হয়েছে ' শৈলী 'সম্পত্তি:
পদ্ধতি 2: 'setAttribute()' পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টের সাথে CSS যোগ করুন
জাভাস্ক্রিপ্টে CSS স্টাইলিং যোগ করতে, ' সেটঅ্যাট্রিবিউট() 'পদ্ধতি। এটি একটি HTML উপাদানে একটি বৈশিষ্ট্য এবং এর মান সেট বা যোগ করতে ব্যবহৃত হয়।
বাক্য গঠন
নিম্নলিখিত সিনট্যাক্স 'এর জন্য ব্যবহার করা হয় সেটঅ্যাট্রিবিউট() 'পদ্ধতি:
উদাহরণ
এখানে, আমরা জাভাস্ক্রিপ্টের বোতামগুলিতে ' ব্যবহার করে বিভিন্ন শৈলী সেট করব সেটঅ্যাট্রিবিউট() 'পদ্ধতি। সমস্ত বোতামের সীমানা ব্যাসার্ধ 'এ সেট করুন .5আরেম ', এবং ' এর পাঠ্য রঙ একমত ' এবং ' প্রত্যাখ্যান করুন 'বোতাম' থেকে সাদা ”
প্রত্যাখ্যান সেট অ্যাট্রিবিউট ( 'শৈলী' , 'পটভূমির রঙ: লাল; রঙ: সাদা; সীমানা-ব্যাসার্ধ: .5rem;' ) ;
গ্রহণ সেট অ্যাট্রিবিউট ( 'শৈলী' , 'পটভূমির রঙ: হলুদ; সীমানা-ব্যাসার্ধ: .5rem;' ) ;
আউটপুট
পদ্ধতি 3: 'createElement()' পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টের সাথে CSS যোগ করুন
আপনি যদি CSS স্টাইলিং এর মতো জাভাস্ক্রিপ্ট স্টাইলিং-এ ক্লাস বা আইডি তৈরি করতে চান, তাহলে ' ক্রিয়েট এলিমেন্ট() 'পদ্ধতি। এটি গতিশীলভাবে একটি নতুন উপাদান তৈরি করতে ব্যবহার করা হয়। স্টাইলিং জন্য একটি তৈরি করুন ' শৈলী এই পদ্ধতি ব্যবহার করে উপাদান। দ্য ' ক্রিয়েট এলিমেন্ট ('স্টাইল') ' JavaScript এ পদ্ধতিটি গতিশীলভাবে একটি নতুন শৈলী উপাদান তৈরি করতে ব্যবহৃত হয়, যা একটি ওয়েব পৃষ্ঠায় CSS শৈলী যোগ করতে ব্যবহার করা যেতে পারে।
বাক্য গঠন
প্রদত্ত সিনট্যাক্স 'এর জন্য ব্যবহৃত হয় ক্রিয়েট এলিমেন্ট() 'পদ্ধতি:
জাভাস্ক্রিপ্টে CSS শৈলী যোগ করার জন্য, প্রদত্ত সিনট্যাক্স ব্যবহার করুন:
const শৈলী = নথি এলিমেন্ট তৈরি করুন ( 'শৈলী' ) ;তারপর নিচের সিনট্যাক্স ব্যবহার করে হেড ট্যাগে স্টাইল এলিমেন্ট যোগ করুন:
নথি মাথা . শিশুকে সংযুক্ত করুন ( শৈলী ) ;এখানে, ' শৈলী 'নতুন তৈরি শৈলী উপাদানের একটি রেফারেন্স, এবং ' নথি ” হল HTML নথির প্রধান উপাদান।
উদাহরণ
প্রথমে, ব্যবহার করে একটি শৈলী উপাদান তৈরি করুন ক্রিয়েট এলিমেন্ট() 'পদ্ধতি:
এখন, একটি তৈরি করুন ' বিটিএন 'সমস্ত বোতাম এবং আইডিতে একই স্টাইলিং প্রয়োগ করার জন্য ক্লাস' btn1 ', ' btn2 ' এবং ' btn3 স্বতন্ত্র বোতাম স্টাইলিং জন্য:
শৈলী innerHTML = `. বিটিএন {
ফন্ট - আকার : 1.1 রেম ;
প্যাডিং : 3px ;
মার্জিন : 2px ;
ফন্ট - পরিবার : ছাড়া - সেরিফ ;
সীমান্ত - ব্যাসার্ধ : .5আরেম ;
}
#btn1 {
পটভূমি - রঙ : সবুজ ;
রঙ : সাদা ;
}
#btn2 {
পটভূমি - রঙ : লাল ;
রঙ : সাদা ;
}
#btn3 {
পটভূমি - রঙ : হলুদ ;
}
` ;
এখন, একটি প্যারামিটার হিসাবে পাস করে ডকুমেন্টের মাথায় স্টাইল উপাদান যুক্ত করুন “ appendChild() 'পদ্ধতি:
নথি মাথা . শিশুকে সংযুক্ত করুন ( শৈলী ) ; আউটপুট
জাভাস্ক্রিপ্টে সিএসএস যোগ করার জন্য এটিই।
উপসংহার
জাভাস্ক্রিপ্টের সাথে CSS যোগ করার জন্য, 'সহ ইনলাইন স্টাইলিং ব্যবহার করুন শৈলী 'সম্পত্তি, এবং' সেটঅ্যাট্রিবিউট() ' পদ্ধতি, অথবা ' ব্যবহার করে বিশ্বব্যাপী স্টাইলিং ক্রিয়েট এলিমেন্ট() 'পদ্ধতি। গ্লোবাল স্টাইলিং আরও দক্ষ যখন একটি ইনলাইন পদ্ধতি সুপারিশ করা হয় না কারণ এটি প্রয়োগের শৈলী বজায় রাখা কঠিন করে তোলে এবং কোড পুনরাবৃত্তি হতে পারে। এই নিবন্ধটি জাভাস্ক্রিপ্টের সাথে CSS যোগ করার পদ্ধতিগুলি বর্ণনা করেছে।