একটি ওয়েব পৃষ্ঠা বা একটি ওয়েবসাইট ডিজাইন করার পর্যায়ে, এমন কিছু পরিস্থিতিতে রয়েছে যেখানে কিছু আপডেটের কারণে আপনাকে আর কিছু নির্দিষ্ট উপাদান অ্যাক্সেস করতে হবে না। তাছাড়া, যখন html এ একটি নির্দিষ্ট এলিমেন্টে একাধিক ক্লাস বরাদ্দ করার প্রয়োজন হয়। এই ধরনের পরিস্থিতিতে, জাভাস্ক্রিপ্টে একটি এইচটিএমএল উপাদানের শ্রেণী পরিবর্তন করা এই ধরনের পরিস্থিতি পূরণের জন্য অনেক সাহায্য করে।
এই ব্লগটি জাভাস্ক্রিপ্টে একটি HTML উপাদানের ক্লাস পরিবর্তন করার সময় বিবেচনা করার পদ্ধতিগুলি প্রদর্শন করবে।
কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি HTML এলিমেন্টের ক্লাস পরিবর্তন করবেন?
জাভাস্ক্রিপ্টের সাথে একটি HTML উপাদানের ক্লাস পরিবর্তন করতে, নিম্নলিখিত পদ্ধতিগুলি প্রয়োগ করা যেতে পারে:
-
- ' শ্রেণির নাম 'সম্পত্তি।
- ' ক্লাসলিস্ট 'সম্পত্তি।
পদ্ধতি 1: className প্রপার্টি ব্যবহার করে জাভাস্ক্রিপ্ট সহ একটি HTML উপাদানের ক্লাস পরিবর্তন করুন
এই পদ্ধতিটি একটি উপাদানের সাথে যুক্ত তৈরি ক্লাস অ্যাক্সেস করে এবং এটি একটি ভিন্ন শ্রেণী নির্ধারণ করে কার্যকর হতে পারে।
নিম্নলিখিত উদাহরণটি বর্ণিত ধারণাটি দেখায়।
উদাহরণ
নীচের প্রদত্ত কোডের মধ্যে ' ' ট্যাগ, 'তে নিম্নলিখিত শিরোনাম অন্তর্ভুক্ত করুন ট্যাগ এর পরে, নির্দিষ্ট বোতাম তৈরি করুন যা একটি ডিফল্ট বরাদ্দ করা হবে ' ক্লাস যা পরে কোডে পরিবর্তন করা হবে। এছাড়াও, এটি একটি বরাদ্দ করুন ' আইডি 'এবং একটি সংযুক্ত' অনক্লিক ” ইভেন্টটি ক্লাস () ফাংশনকে আহ্বান করে।
কোডে পরে, 'এ নিম্নলিখিত বার্তাটি অন্তর্ভুক্ত করুন ” ক্লাসের রূপান্তরের সময় এটিকে DOM-এ প্রদর্শন করতে ট্যাগ করুন:
HTML কোড:
< শরীর শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র;' >< h2 > এলিমেন্ট পরিবর্তন করুন এর ক্লাসের নাম
পুরানো ক্লাসের নাম হল: ডিফল্ট ক্লাস
জেএস কোডে, “নামক একটি ফাংশন ঘোষণা করুন ক্লাস() ” এখানে, ' ব্যবহার করে তার আইডি দ্বারা ডিফল্ট ক্লাস অ্যাক্সেস করুন document.getElementById() 'পদ্ধতি। দ্য ' শ্রেণির নাম 'প্রপার্টি তৈরি করা ক্লাসকে 'নামক ক্লাসে রূপান্তরিত করবে নতুন ক্লাস ”
অবশেষে, ' অভ্যন্তরীণ পাঠ্য ' সম্পত্তি পরিবর্তিত শ্রেণীর সাথে নিম্নলিখিত বার্তা প্রদর্শন করবে:
JS কোড:
ফাংশন ক্লাস ( ) {document.getElementById ( 'আমার বোতাম' ) .className = 'নতুন ক্লাস' ;
var অ্যাক্সেস = document.getElementById ( 'আমার বোতাম' ) .শ্রেণির নাম;
document.getElementById ( 'মাথা' ) .innerHTML = 'নতুন ক্লাসের নাম হল:' + অ্যাক্সেস;
}
আউটপুট
উপরের আউটপুটে, “এর পরিবর্তন লক্ষ্য করুন ক্লাস ' DOM-এ বোতামে ক্লিক করার পরে ডানদিকে।
পদ্ধতি 2: ক্লাসলিস্ট প্রপার্টি ব্যবহার করে জাভাস্ক্রিপ্ট সহ একটি এইচটিএমএল উপাদানের ক্লাস পরিবর্তন করুন
এই বিশেষ পদ্ধতিটি নির্দিষ্ট শ্রেণীটি অপসারণ করার জন্য প্রয়োগ করা যেতে পারে এবং এটিতে একটি নতুন ক্লাস বরাদ্দ করে এটি পরিবর্তন করে।
উদাহরণ
প্রথমত, একটি শিরোনাম অন্তর্ভুক্ত করার জন্য উপরে আলোচিত পদ্ধতিগুলি পুনরাবৃত্তি করুন, নির্ধারিত শ্রেণী, আইডি এবং সংযুক্ত অনক্লিক ইভেন্টের সাথে একটি বোতাম তৈরি করুন যাতে নির্দিষ্ট ফাংশনটি চালু হয়। পরবর্তী, একইভাবে শিরোনাম বিভাগ যোগ করুন “ ' ট্যাগ বোতাম ক্লিক করার পরে পরিবর্তিত শ্রেণীর ব্যবহারকারীকে অবহিত করতে:
HTML কোড
< শরীর শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র;' >< h2 > এলিমেন্টের ক্লাস পরিবর্তন করুন ! h2 >
< বোতাম ক্লাস = 'ওয়েবসাইট' অনক্লিক = 'ক্লাস()' আইডি = 'পরিবর্তন' > আমাকে ক্লিক করুন বোতাম >
< h3 আইডি = 'মাথা' শৈলী = 'পটভূমির রঙ: হালকা ধূসর;' > পুরানো ক্লাসের নাম: ওয়েবসাইট h3 >
শরীর >
এখন, 'নামের একটি ফাংশন ঘোষণা করুন ক্লাস() ” এর সংজ্ঞায়, প্রয়োগ করুন ' ক্লাসলিস্ট 'সহ সম্পত্তি' অপসারণ() 'অ্যাক্সেসড ক্লাস বাদ দেওয়ার পদ্ধতি' ওয়েবসাইট ” যা তৈরি করা বোতামের সাথে মিলে যায়।
পরবর্তী ধাপে, আলোচিত সম্পত্তি ব্যবহার করে একই ক্লাসে একটি নতুন ক্লাস বরাদ্দ করুন “ যোগ করুন() 'পদ্ধতি। শেষ পর্যন্ত, পূর্ববর্তী পদ্ধতিতে আলোচনা করা হিসাবে পরিবর্তিত শ্রেণী প্রদর্শন করুন:
জেএস কোড
ফাংশন ক্লাস ( ) {document.getElementById ( 'পরিবর্তন' ) .classList.remove ( 'ওয়েবসাইট' )
document.getElementById ( 'পরিবর্তন' ) .classList.add ( 'লিনাক্স' ) ;
var অ্যাক্সেস = document.getElementById ( 'পরিবর্তন' ) ক্লাসলিস্ট;
document.getElementById ( 'মাথা' ) .innerHTML = 'নতুন ক্লাসের নাম হল:' + অ্যাক্সেস;
}
আউটপুট
এই লেখার অর্থ জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল উপাদানের ক্লাস পরিবর্তন করার ধারণাটি পরিষ্কার করা।
উপসংহার
দ্য ' শ্রেণির নাম ' এবং ' ক্লাসলিস্ট HTML এলিমেন্টের ক্লাস পরিবর্তন করার জন্য বৈশিষ্ট্যগুলি ব্যবহার করা যেতে পারে। ClassName প্রপার্টিটি ক্লাসলিস্ট প্রপার্টির তুলনায় কাঙ্খিত প্রয়োজনীয়তা পূরণে একটি দ্রুত পদ্ধতির দিকে পরিচালিত করে কারণ এতে কম কোড জটিলতা জড়িত। ক্লাসলিস্ট প্রপার্টি, অন্য দিকে, অতিরিক্ত দুটি পদ্ধতির সাহায্যে ডিফল্ট ক্লাস পরিবর্তন করেছে। এই নিবন্ধটি জাভাস্ক্রিপ্টের সাথে এইচটিএমএল উপাদানের শ্রেণী পরিবর্তন করার পদ্ধতির চিত্র তুলে ধরেছে।