জাভাস্ক্রিপ্ট দিয়ে ক্লাস আপডেট করা
জাভাস্ক্রিপ্ট HTML উপাদানগুলির সাথে গতিশীলভাবে ইন্টারঅ্যাক্ট এবং ম্যানিপুলেট করার জন্য শক্তিশালী সরঞ্জাম সরবরাহ করে। একটি সাধারণ কাজ হল অনক্লিকের মতো ইভেন্টগুলির প্রতিক্রিয়া হিসাবে একটি HTML উপাদানের শ্রেণী পরিবর্তন করা।
এই নির্দেশিকাটি প্রদর্শন করবে কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানের ক্লাস পরিবর্তন করতে হয়, আপনার ওয়েব পৃষ্ঠাগুলিতে গতিশীল স্টাইলিং এবং আচরণ পরিবর্তনের অনুমতি দেয়। আপনি একটি বোতাম ক্লিক বা অন্য ইভেন্টে সাড়া দিচ্ছেন না কেন, এই কৌশলগুলি আপনার ওয়েব ডেভেলপমেন্ট দক্ষতা বাড়াবে।
| আদেশ | বর্ণনা |
|---|---|
| className | একটি উপাদানের ক্লাস অ্যাট্রিবিউট সেট বা রিটার্ন করে। উপাদানের শ্রেণী পরিবর্তন করতে ব্যবহৃত হয়। |
| getElementById | নির্দিষ্ট মান সহ ID বৈশিষ্ট্য আছে এমন উপাদান প্রদান করে। বোতাম উপাদান নির্বাচন করতে ব্যবহৃত. |
| onclick | উপাদানটিতে একটি ক্লিক ইভেন্ট ঘটলে কার্যকর করার জন্য ফাংশন সেট করে। |
| removeClass | jQuery-এ নির্বাচিত উপাদানগুলি থেকে এক বা একাধিক শ্রেণির নাম সরিয়ে দেয়। |
| addClass | jQuery-এ নির্বাচিত উপাদানগুলিতে এক বা একাধিক শ্রেণীর নাম যোগ করে। |
| $ | jQuery-এর উপনাম, উপাদান নির্বাচন করতে এবং তাদের উপর ক্রিয়া সম্পাদন করতে ব্যবহৃত হয়। |
জাভাস্ক্রিপ্ট ক্লাস ম্যানিপুলেশন বোঝা
প্রদত্ত স্ক্রিপ্টগুলি প্রদর্শন করে যে কীভাবে একটি ক্লিক ইভেন্টের প্রতিক্রিয়া হিসাবে JavaScript এবং jQuery ব্যবহার করে একটি HTML উপাদানের ক্লাস পরিবর্তন করতে হয়। প্রথম স্ক্রিপ্টে, এই কার্যকারিতা অর্জনের জন্য প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করা হয়। দ্য getElementById আইডি 'myButton' সহ বোতাম উপাদান নির্বাচন করার জন্য পদ্ধতি ব্যবহার করা হয়। দ্য onclick ইভেন্টটি তারপর এই উপাদানটিতে বরাদ্দ করা হয়, বোতামটি ক্লিক করার সময় কার্যকর করা ফাংশনটি নির্দিষ্ট করে। এই ফাংশন ভিতরে, বোতাম এর className প্রপার্টি 'পরিবর্তিত'-এ সেট করা হয়েছে, এর শ্রেণী পরিবর্তন করে এবং পরবর্তীতে CSS-এ সংজ্ঞায়িত হিসাবে এর স্টাইল। এই স্ক্রিপ্টটি কার্যকরভাবে DOM ম্যানিপুলেশনের জন্য প্লেইন জাভাস্ক্রিপ্ট ব্যবহারের সরলতা এবং প্রত্যক্ষতা প্রদর্শন করে।
দ্বিতীয় স্ক্রিপ্টটি jQuery ব্যবহার করে একই কার্যকারিতা চিত্রিত করে, একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা এইচটিএমএল ডকুমেন্ট ট্রাভার্সাল এবং ম্যানিপুলেশনকে সহজ করে। এখানে, jQuery alias $ বোতাম উপাদান নির্বাচন করতে ব্যবহৃত হয়. দ্য click তারপর ক্লিক ইভেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার সেট আপ করতে পদ্ধতিটি প্রয়োগ করা হয়। এই হ্যান্ডলারের মধ্যে, jQuery ব্যবহার করে বোতামের ক্লাস পরিবর্তন করা হয় removeClass এবং addClass পদ্ধতি এই পদ্ধতিগুলি সাধারণ জাভাস্ক্রিপ্টের তুলনায় আরও পঠনযোগ্য এবং সংক্ষিপ্ত পদ্ধতির অফার করে উপাদানের ক্লাসগুলি পরিচালনা করার একটি সুবিধাজনক উপায় প্রদান করে। উভয় স্ক্রিপ্টের লক্ষ্য হল ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে একটি উপাদানের শ্রেণী পরিবর্তন করার জন্য বিভিন্ন টুল কিভাবে একই লক্ষ্য অর্জন করতে পারে তা প্রদর্শন করা।
জাভাস্ক্রিপ্ট ব্যবহার করে ক্লিক করার জন্য একটি উপাদানের ক্লাস পরিবর্তন করা
জাভাস্ক্রিপ্ট এবং এইচটিএমএল
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
jQuery ব্যবহার করে একটি HTML এলিমেন্টের ক্লাস আপডেট করা
jQuery সহ জাভাস্ক্রিপ্ট
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
জাভাস্ক্রিপ্টে ক্লাস ম্যানিপুলেশনের জন্য উন্নত কৌশল
ইভেন্টের প্রতিক্রিয়ায় প্রাথমিক শ্রেণি পরিবর্তনের বাইরে, জাভাস্ক্রিপ্ট একটি উপাদানের শ্রেণি তালিকা ম্যানিপুলেট করার জন্য আরও উন্নত কৌশল অফার করে। যেমন একটি পদ্ধতি হল classList সম্পত্তি, যা ক্লাসের সাথে কাজ করার জন্য আরও নমনীয় এবং শক্তিশালী উপায় প্রদান করে। দ্য classList সম্পত্তি উপাদানের ক্লাস বৈশিষ্ট্যের একটি লাইভ DOMTokenList সংগ্রহ ফেরত দেয়। ব্যবহার classList, আপনি উপাদানে প্রয়োগ করা হতে পারে এমন অন্যান্য ক্লাসগুলিকে প্রভাবিত না করে ক্লাসগুলি যোগ করতে, সরাতে, টগল করতে এবং পরীক্ষা করতে পারেন৷
উদাহরণস্বরূপ, add পদ্ধতিটি একটি উপাদানে এক বা একাধিক ক্লাস যুক্ত করতে ব্যবহার করা যেতে পারে, যখন remove পদ্ধতি এক বা একাধিক নির্দিষ্ট ক্লাস মুছে ফেলতে পারে। দ্য toggle পদ্ধতিটি বিশেষভাবে উপযোগী কারণ এটি ক্লাস যুক্ত করে যদি এটি বিদ্যমান না থাকে এবং যদি এটি থাকে তবে এটি সরিয়ে দেয়, এটি অন্ধকার মোড টগলগুলি বাস্তবায়নের মতো কাজের জন্য আদর্শ করে তোলে। উপরন্তু, দ contains মেথড চেক করে যে উপাদানটিতে একটি নির্দিষ্ট শ্রেণী রয়েছে কিনা, যা শর্তসাপেক্ষে একটি উপাদানের বর্তমান অবস্থার উপর ভিত্তি করে শৈলী বা আচরণ প্রয়োগের জন্য কার্যকর হতে পারে।
জাভাস্ক্রিপ্ট ক্লাস ম্যানিপুলেশন সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
- আমি কিভাবে একটি উপাদান একাধিক ক্লাস যোগ করতে পারি?
- ব্যবহার classList.add একাধিক আর্গুমেন্ট সহ পদ্ধতি: element.classList.add('class1', 'class2').
- আমি কি একটি উপাদান থেকে সব ক্লাস মুছে ফেলতে পারি?
- হ্যাঁ, আপনি ব্যবহার করতে পারেন className সম্পত্তি এবং এটি একটি খালি স্ট্রিং সেট করুন: element.className = ''.
- পার্থক্য কি className এবং classList?
- className পুরো ক্লাস অ্যাট্রিবিউট সেট করে বা পায় classList ক্লাসের আরও দানাদার ম্যানিপুলেশনের জন্য অনুমতি দেয়।
- একটি উপাদান একটি নির্দিষ্ট শ্রেণী আছে কিনা আমি কিভাবে পরীক্ষা করব?
- ব্যবহার classList.contains পদ্ধতি: element.classList.contains('classname').
- আমি কিভাবে একটি উপাদান একটি ক্লাস টগল করবেন?
- ব্যবহার classList.toggle পদ্ধতি: element.classList.toggle('classname').
- আমি কি ক্লাস ম্যানিপুলেট করতে jQuery ব্যবহার করতে পারি?
- হ্যাঁ, jQuery এর মত পদ্ধতি প্রদান করে addClass, removeClass, এবং toggleClass.
- একটি লাইভ DOMTokenList কি?
- ক DOMTokenList একটি লাইভ সংগ্রহ যা উপাদানটির ক্লাস বৈশিষ্ট্য পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আপডেট হয়।
- হয় classList সব ব্রাউজারে সমর্থিত?
- classList সমস্ত আধুনিক ব্রাউজারে সমর্থিত, কিন্তু ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলি এটি সম্পূর্ণরূপে সমর্থন নাও করতে পারে৷
- আমি কিভাবে অবস্থার উপর ভিত্তি করে গতিশীলভাবে ক্লাস যোগ করতে পারি?
- তুমি ব্যবহার করতে পার if সঙ্গে একত্রিত বিবৃতি classList.add বা classList.remove শর্তসাপেক্ষে ক্লাস প্রয়োগ করতে।
ডায়নামিক ক্লাস পরিবর্তনের জন্য মূল কৌশল
প্রদত্ত স্ক্রিপ্টগুলি প্রদর্শন করে যে কীভাবে একটি ক্লিক ইভেন্টের প্রতিক্রিয়া হিসাবে JavaScript এবং jQuery ব্যবহার করে একটি HTML উপাদানের ক্লাস পরিবর্তন করতে হয়। প্রথম স্ক্রিপ্টে, এই কার্যকারিতা অর্জনের জন্য প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করা হয়। দ্য getElementById আইডি 'myButton' সহ বোতাম উপাদান নির্বাচন করার জন্য পদ্ধতি ব্যবহার করা হয়। দ্য onclick ইভেন্টটি তারপরে এই উপাদানটিতে বরাদ্দ করা হয়, বোতামটি ক্লিক করার সময় কার্যকর করা ফাংশনটি নির্দিষ্ট করে। এই ফাংশন ভিতরে, বোতাম এর className প্রপার্টি 'পরিবর্তিত'-এ সেট করা হয়েছে, এর শ্রেণী পরিবর্তন করে এবং পরবর্তীতে CSS-এ সংজ্ঞায়িত করা হয়েছে। এই স্ক্রিপ্টটি কার্যকরভাবে DOM ম্যানিপুলেশনের জন্য প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করার সরলতা এবং প্রত্যক্ষতা প্রদর্শন করে।
দ্বিতীয় স্ক্রিপ্টটি jQuery ব্যবহার করে একই কার্যকারিতা চিত্রিত করে, একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা এইচটিএমএল ডকুমেন্ট ট্রাভার্সাল এবং ম্যানিপুলেশনকে সহজ করে। এখানে, jQuery alias $ বোতাম উপাদান নির্বাচন করতে ব্যবহৃত হয়. দ্য click তারপর ক্লিক ইভেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার সেট আপ করতে পদ্ধতিটি প্রয়োগ করা হয়। এই হ্যান্ডলারের মধ্যে, বোতামের ক্লাস jQuery ব্যবহার করে পরিবর্তন করা হয় removeClass এবং addClass পদ্ধতি এই পদ্ধতিগুলি সাধারণ জাভাস্ক্রিপ্টের তুলনায় আরও পঠনযোগ্য এবং সংক্ষিপ্ত পদ্ধতির অফার করে উপাদানের ক্লাসগুলি পরিচালনা করার একটি সুবিধাজনক উপায় প্রদান করে। উভয় স্ক্রিপ্টের লক্ষ্য হল ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে একটি উপাদানের শ্রেণী পরিবর্তনের গতিশীলভাবে পরিবর্তন করার একই লক্ষ্য কীভাবে বিভিন্ন টুলগুলি অর্জন করতে পারে তা প্রদর্শন করা।
মূল পয়েন্ট সারসংক্ষেপ
জাভাস্ক্রিপ্ট বা jQuery ব্যবহার করে একটি এইচটিএমএল এলিমেন্টের ক্লাস ম্যানিপুলেট করা একটি এলিমেন্টের স্টাইলিং এবং আচরণকে গতিশীলভাবে আপডেট করার একটি সহজ উপায় প্রদান করে। বুঝতে এবং মত পদ্ধতি ব্যবহার করে className, classList, এবং jQuery-এর ক্লাস ম্যানিপুলেশন পদ্ধতি, ডেভেলপাররা তাদের ওয়েব পৃষ্ঠাগুলির ইন্টারঅ্যাক্টিভিটি এবং প্রতিক্রিয়াশীলতা বাড়াতে পারে, ব্যবহারকারীদের জন্য তাদের আরও আকর্ষক করে তোলে।