یہ دستی جاوا اسکرپٹ میں ایک فعال کلاس کو شامل کرنے کے طریقہ کار کی وضاحت کرے گا۔
جاوا اسکرپٹ میں ایکٹو کلاس کیسے شامل کی جائے؟
ایک فعال کلاس کو شامل کرنے کے لیے، ہم درج ذیل طریقے استعمال کریں گے۔
آئیے پہلے طریقہ کی طرف چلتے ہیں!
طریقہ 1: جاوا اسکرپٹ میں ایکٹو کلاس شامل کرنے کے لیے classList.add() طریقہ کے ساتھ document.getElementById() استعمال کریں
جاوا اسکرپٹ میں، ' document.getElementById() ” طریقہ کسی مخصوص عنصر تک اس کی شناخت کے ذریعے استعمال کیا جاتا ہے۔ تاہم، یہ صرف ان کی شناخت کی بنیاد پر عناصر کا انتخاب کرتا ہے، کلاسوں کی نہیں۔ آپ اسے استعمال کر سکتے ہیں ' classList.add() جاوا اسکرپٹ میں ایک فعال کلاس شامل کرنے کا طریقہ۔
آئیے ایک مثال لے کر اس طریقہ کو دریافت کریں۔
مثال
ہماری HTML فائل میں، ہم لیں گے ' 'کچھ متن کے ساتھ ٹیگ کریں، اس کی آئی ڈی کو بطور بیان کریں' TXT '، اور ایک شامل کریں ' کلک پر 'واقعہ جو متحرک کرے گا' محرک کریں() فنکشن نوٹ کریں کہ،
ٹیگ کو
ٹیگ کے اندر شامل کریں: < پی آئی ڈی = 'TXT' کلک پر = 'محرک کریں()' > یہاں ٹیپ کریں۔ ص >JavaScript فائل میں، activate() فنکشن کی وضاحت اس طرح کریں کہ یہ سب سے پہلے document.getElementbyId() طریقہ میں اپنی id کا استعمال کرتے ہوئے پیراگراف عنصر تک رسائی حاصل کرے۔ پھر، اسٹائلنگ کے مقاصد کے لیے اس کی کلاس لسٹ میں ایک CSS کلاس شامل کریں:
فنکشن کو چالو کرنا ( ) {
وہاں ایک = دستاویز getElementById ( 'TXT' ) ;
a کلاس لسٹ . شامل کریں ( 'نئی کلاس' ) ;
}
سی ایس ایس فائل میں، ' سے پہلے ایک نقطہ رکھیں نئی کلاس 'اور تفویض کریں' پس منظر کا رنگ 'جائیداد ایک قدر' کینو ”:
. نئی کلاس {پس منظر - رنگ : کینو ;
}
نتیجے کے طور پر، جب آپ پیراگراف عنصر پر کلک کریں گے، تو اس پر اضافی پس منظر کی خاصیت کا اطلاق ہو جائے گا:
آئیے درج ذیل طریقہ پر ایک نظر ڈالیں جس میں ہم ایک فعال کلاس کو شامل کرنے کے لیے document.querySelector() استعمال کریں گے۔
طریقہ 2: جاوا اسکرپٹ میں ایکٹو کلاس شامل کرنے کے لیے classList.add() طریقہ کے ساتھ document.querySelector() استعمال کریں
جاوا اسکرپٹ میں، ' document.querySelector() کوڈ سے پہلا عنصر حاصل کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ آپ querySelector() طریقہ کے اندر کلاسز اور ids دونوں کی وضاحت کر سکتے ہیں۔ اس کے ساتھ استعمال کیا جا سکتا ہے ' classList.add() جاوا اسکرپٹ میں ایک فعال کلاس شامل کرنے کا طریقہ۔
مثال
اب ہم صرف استعمال کریں گے ' document.querySelector() 'آئی ڈی کے ساتھ' #TXT پیراگراف عنصر کو منتخب کرنے کے لیے۔ ایک بار پھر، classList.add() طریقہ فعال کو شامل کرنے کے لیے استعمال کیا جائے گا۔ نئی کلاس ”:
فنکشن کو چالو کرنا ( ) {وہاں ایک = دستاویز سوال سلیکٹر ( '#TXT' ) ;
a کلاس لسٹ . شامل کریں ( 'نئی کلاس' ) ;
}
آؤٹ پٹ
ہم نے جاوا اسکرپٹ میں ایکٹیو کلاس شامل کرنے کے دو آسان طریقے سیکھے ہیں۔
نتیجہ
فعال کلاس کو شامل کرنے کے لیے، ہم استعمال کر سکتے ہیں ' getElementById() 'یا' سوال سلیکٹر() 'classList.add() طریقہ کے ساتھ۔ مذکورہ دونوں طریقوں کو پہلے ان کی id کے ذریعے عناصر ملتے ہیں، پھر classList.add() طریقہ استعمال کرتے ہوئے، عنصر کو تفویض کردہ نیا کلاس نام جو اسٹائلنگ کے مقاصد کے لیے استعمال کیا جا سکتا ہے۔ اس پوسٹ میں جاوا اسکرپٹ میں ایکٹیو کلاس شامل کرنے سے متعلق طریقہ کار کو بیان کیا گیا ہے۔