এই পোস্টটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি এইচটিএমএল উপাদানে একাধিক বৈশিষ্ট্য সেট করার পদ্ধতিটি ব্যাখ্যা করবে।
জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে একাধিক বৈশিষ্ট্য কিভাবে সেট করবেন?
একই সাথে একটি উপাদানে একাধিক বৈশিষ্ট্য সেট করতে, প্রথমে, বৈশিষ্ট্যের নাম এবং মান সহ একটি অবজেক্ট তৈরি করুন। 'এর সাথে একটি অ্যারে হিসাবে বস্তুর কীগুলির একটি তালিকা পান Object.keys() ' পদ্ধতিতে, তারপরে, নির্দিষ্ট HTML উপাদানে সমস্ত বৈশিষ্ট্য সেট করুন ' সেটঅ্যাট্রিবিউট() 'পদ্ধতি।
বাক্য গঠন
প্রদত্ত সিনট্যাক্স setAttribute() পদ্ধতির জন্য ব্যবহৃত হয়:
উপাদান সেট অ্যাট্রিবিউট ( attrName, attrValue ) ;
উপরের সিনট্যাক্সে দুটি পরামিতি রয়েছে: “ নাম ' এবং ' মান ”
- ' attrName ” নতুন বৈশিষ্ট্যের নাম।
- ' attrValue ” হল নতুন বৈশিষ্ট্যের মান।
- এই পদ্ধতিটি একটি নতুন বৈশিষ্ট্য তৈরি করবে এবং এটি একটি মান নির্ধারণ করবে। যদি নির্দিষ্ট বৈশিষ্ট্যটি ইতিমধ্যেই বিদ্যমান থাকে তবে এর মান আপডেট করা হবে।
Object.keys() পদ্ধতির জন্য প্রদত্ত সিনট্যাক্স ব্যবহার করুন:
অবজেক্ট . কী ( বস্তু )এটি একটি প্রদত্ত বস্তুর একটি অ্যারে প্রদান করে।
উদাহরণ 1: setAttribute() পদ্ধতির সাহায্যে forEach() পদ্ধতি ব্যবহার করে একটি উপাদানে একাধিক বৈশিষ্ট্য সেট করুন
প্রথমে, HTML ফাইলে একটি উপাদান তৈরি করুন:
< বোতাম আইডি = 'বোতাম' > লিনাক্সহিন্ট বোতাম >বর্তমানে, ওয়েব পৃষ্ঠাটি এইরকম হবে:
জাভাস্ক্রিপ্ট কোডে, প্রথমে, 'নামক একটি বস্তু তৈরি করুন' উপাদান বৈশিষ্ট্য ” এবং অবজেক্টে নাম এবং মান সহ বৈশিষ্ট্য যোগ করুন। এখানে, আমরা স্টাইল অ্যাট্রিবিউট, উপাদানটির নাম এবং বোতাম উপাদানটির জন্য নিষ্ক্রিয় বৈশিষ্ট্য যোগ করব:
const উপাদান বৈশিষ্ট্য = {শৈলী : 'ব্যাকগ্রাউন্ড-রঙ: rgb(153, 28, 49); সাদা রং;' ,
নাম : 'লিনাক্স বোতাম' ,
অক্ষম : ' ,
} ;
এখন, 'নামের একটি ফাংশন সংজ্ঞায়িত করুন সেটMultipleAttributesonElement 'যেখানে প্রথমে কল করুন' Object.keys() বস্তুর কীগুলির অ্যারে পাওয়ার পদ্ধতি এবং তারপর ব্যবহার করুন ' প্রতিটির জন্য() অ্যারের মাধ্যমে পুনরাবৃত্তি করার পদ্ধতি এবং অবশেষে কল করুন সেটঅ্যাট্রিবিউট() ' নির্দিষ্ট HTML উপাদানে সমস্ত সংজ্ঞায়িত বৈশিষ্ট্য সেট করার পদ্ধতি।
ফাংশন সেটMultipleAttributesonElement ( উপাদান, উপাদান বৈশিষ্ট্য ) {অবজেক্ট . কী ( উপাদান বৈশিষ্ট্য ) . প্রতিটির জন্য ( বৈশিষ্ট্য => {
উপাদান সেট অ্যাট্রিবিউট ( বৈশিষ্ট্য, elemAttributes [ বৈশিষ্ট্য ] ) ;
} ) ;
}
'এর সাহায্যে তার নির্ধারিত আইডি ব্যবহার করে বোতামটি আনুন getElementById() 'পদ্ধতি:
const বোতাম = নথি getElementById ( 'বোতাম' ) ;সংজ্ঞায়িত ফাংশন আহ্বান করুন ' সেটMultipleAttributesonElement ” এবং প্রথম আর্গুমেন্ট হিসেবে এলিমেন্ট এবং দ্বিতীয় আর্গুমেন্ট হিসেবে অ্যাট্রিবিউটের অবজেক্ট পাস করুন:
সেটMultipleAttributesonElement ( বোতাম, উপাদান বৈশিষ্ট্য ) ;আউটপুট দেখায় যে একটি বোতামের একাধিক বৈশিষ্ট্য সফলভাবে যোগ করা হয়েছে:
আপনি বৈশিষ্ট্যগুলির জন্য একটি পৃথক বস্তু তৈরি না করেও একটি উপাদানে একাধিক বৈশিষ্ট্য সেট করতে পারেন। এটি করার জন্য, নীচের উদাহরণ অনুসরণ করুন।
উদাহরণ 2: setAttribute() পদ্ধতির সাহায্যে লুপের জন্য ব্যবহার করে একটি উপাদানে একাধিক বৈশিষ্ট্য সেট করুন
একটি জাভাস্ক্রিপ্ট ফাইলে দুটি পরামিতি সহ একটি ফাংশন সংজ্ঞায়িত করুন এবং এর ভিতরে একাধিক বৈশিষ্ট্য সেট করতে একটি লুপ ব্যবহার করুন ' সেটঅ্যাট্রিবিউট() 'পদ্ধতি:
ফাংশন সেটMultipleAttributesonElement ( উপাদান, উপাদান বৈশিষ্ট্য ) {জন্য ( আমি elemAttributes এ যাক ) {
উপাদান সেট অ্যাট্রিবিউট ( i, elemAttributes [ i ] ) ;
}
}
নির্ধারিত আইডি ব্যবহার করে বোতামটি পুনরুদ্ধার করুন:
const বোতাম = নথি getElementById ( 'বোতাম' ) ;নাম-মানের জোড়া আকারে বোতাম উপাদান এবং একাধিক বৈশিষ্ট্য পাস করে সংজ্ঞায়িত ফাংশনটি কল করুন:
সেটMultipleAttributesonElement ( বোতাম, { 'শৈলী' : 'পটভূমির রঙ: rgb(153, 28, 49); রঙ: সাদা;' , 'অক্ষম' : '' , 'নাম' : 'লিনাক্স বোতাম' } ) ;আউটপুট
আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি এইচটিএমএল উপাদানে একাধিক বৈশিষ্ট্য সেট করার সাথে সম্পর্কিত সমস্ত প্রয়োজনীয় তথ্য সংকলন করেছি।
উপসংহার
জাভাস্ক্রিপ্ট পূর্বনির্ধারিত সেটঅ্যাট্রিবিউট() ” পদ্ধতিটি একটি উপাদানের জন্য একক বা একাধিক বৈশিষ্ট্য সেট করতে ব্যবহৃত হয়। একটি এলিমেন্টে একাধিক অ্যাট্রিবিউট সেট করতে প্রথমে একটি অবজেক্ট তৈরি করুন যাতে নাম-মানের আকারে অ্যাট্রিবিউট থাকে। ' ব্যবহার করে একটি অ্যারেতে বস্তুর কীগুলি পান Object.keys() 'পদ্ধতি, তারপর নির্দিষ্ট উপাদানগুলিতে সমস্ত বৈশিষ্ট্য সেট করুন ' সেটঅ্যাট্রিবিউট() 'পদ্ধতি। এই পোস্টে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি এইচটিএমএল উপাদানে একাধিক বৈশিষ্ট্য সেট করার পদ্ধতিটি চিত্রিত করেছি।