جاوا اسکرپٹ میں متن کا رنگ کیسے تبدیل کریں۔

یہ مطالعہ جاوا اسکرپٹ میں متن کا رنگ تبدیل کرنے کے طریقوں کی وضاحت کرے گا۔

جاوا اسکرپٹ میں متن کا رنگ کیسے تبدیل کیا جائے؟

جاوا اسکرپٹ میں متن کا رنگ تبدیل کرنے کے لیے، ذیل میں بیان کردہ پہلے سے طے شدہ جاوا اسکرپٹ طریقے استعمال کریں:

• getElementById() طریقہ کے ساتھ style.color پراپرٹی
• querySelector() طریقہ کے ساتھ style.color پراپرٹی

آئیے انفرادی طور پر ان طریقوں کی وضاحت کریں۔

طریقہ 1: getElementById() طریقہ کے ساتھ style.color پراپرٹی کا استعمال کرتے ہوئے متن کا رنگ تبدیل کریں

متن کا رنگ تبدیل کرنے کے لیے، آپ ' getElementById() 'کے ساتھ طریقہ' style.color ' جائیداد. ایسی صورت میں، getElementById() طریقہ کا استعمال کرتے ہوئے ٹیکسٹ عنصر تک رسائی حاصل کی جا سکتی ہے اور پھر HTML style.color پراپرٹی کی مدد سے کلر انتساب کو لاگو کیا جا سکتا ہے۔

نحو

getElementById() طریقہ کی مدد سے کلر پراپرٹی کا استعمال کرتے ہوئے متن کا رنگ تبدیل کرنے کے لیے دیے گئے نحو کا استعمال کریں:

' آئی ڈی ' عنصر کی شناخت ہے جو متن کے عنصر تک رسائی حاصل کرنے اور پھر style.color پراپرٹی کا استعمال کرتے ہوئے اس کا رنگ تبدیل کرنے کے لیے مخصوص کی گئی ہے۔

بیان کردہ تصور کو سمجھنے کے لیے ذیل کی مثال کی طرف بڑھیں!

مثال

سب سے پہلے، ہم استعمال کرتے ہوئے ایک سرخی بنائیں گے

ٹیگ کریں اور ایک آئی ڈی تفویض کریں ' آئی ڈی ' جو h4 عنصر تک رسائی کے لیے استعمال ہوتا ہے، پھر، ایک بٹن بنائیں جو ایک فنکشن کا نام دے' تبدیلی کا رنگ() جاوا اسکرپٹ (JS) فائل میں اس کی وضاحت کی گئی ہے جب شامل کردہ بٹن کے آن کلک ایونٹ کو متحرک کیا جاتا ہے:

< h4 آئی ڈی = 'id' > LinuxHint میں خوش آمدید h4 >

< بٹن کی قسم = 'بٹن' کلک پر = 'Change Color()' > جادو دیکھنے کے لیے کلک کریں۔ بٹن >

جے ایس فائل میں، 'نامی فنکشن کی وضاحت کریں تبدیلی کا رنگ() اور اس کی آئی ڈی کو getElementById() طریقہ پر منتقل کرکے سرخی حاصل کریں اور پھر اس کا رنگ تبدیل کریں:

فنکشن کا رنگ تبدیل کریں۔ ( ) {

دستاویز getElementById ( 'id' ) . انداز . رنگ = 'سرخ' ;

}

آخر میں، HTML فائل میں src ٹیگ کا استعمال کرتے ہوئے JavaScript فائل کے ماخذ کی وضاحت کریں:

< سکرپٹ src = './JSfile.js' >> سکرپٹ >

آؤٹ پٹ سے یہ دیکھا جا سکتا ہے کہ جب شامل کردہ بٹن پر کلک کیا جاتا ہے تو ٹیکسٹ عنصر نے اپنا رنگ تبدیل کر کے ' سرخ ”:

آئیے دوسرا طریقہ دیکھیں!

طریقہ 2: querySelector() طریقہ کے ساتھ style.color پراپرٹی کا استعمال کرتے ہوئے متن کا رنگ تبدیل کریں

آپ 'کا استعمال کرکے متن کا رنگ بھی تبدیل کر سکتے ہیں۔ سوال سلیکٹر() 'style.color پراپرٹی کے ساتھ طریقہ۔ یہ id یا تفویض کردہ کلاس دونوں کے ساتھ عنصر تک رسائی حاصل کرتا ہے جبکہ getElementById() طریقہ صرف عنصر کو اس کی تفویض کردہ id کے ساتھ بازیافت کرتا ہے۔

نحو

querySelector() طریقہ کی مدد سے کلر پراپرٹی کا استعمال کرتے ہوئے ٹیکسٹ کا رنگ تبدیل کرنے کے لیے درج ذیل نحو کا استعمال کریں:

دستاویز سوال سلیکٹر ( 'id/className' ) . انداز . رنگ = 'رنگ' ;

مثال

یہاں، ہم استعمال کریں گے

'نامی کلاس کے ساتھ پیراگراف شامل کرنے کے لئے ٹیگ کریں رنگ ”، جو کہ

عنصر اور ایک بٹن تک رسائی حاصل کرنے میں مدد کرے گا جو جاوا اسکرپٹ کو کال کرے گا۔ تبدیلی کا رنگ() ' طریقہ جب اس کے آن کلک ایونٹ کو متحرک کیا جائے گا:

< ص کلاس = 'رنگ' > LinuxHint میں خوش آمدید ص >

< بٹن پر کلک کریں۔ = 'Change Color()' > جادو دیکھنے کے لیے کلک کریں۔ بٹن >

کی تعریف میں ' تبدیلی کا رنگ() 'طریقہ، ہم درخواست کریں گے' سوال سلیکٹر() ڈاٹ (.) کے ساتھ کلاس کا نام پاس کرنے کا طریقہ جو اشارہ کرتا ہے کہ عنصر تک اس کے کلاس کے نام کی بنیاد پر رسائی حاصل کی گئی ہے، اور پھر اس پر کلر پراپرٹی لگائیں:

فنکشن کا رنگ تبدیل کریں۔ ( ) {

دستاویز سوال سلیکٹر ( '.رنگ' ) . انداز . رنگ = 'میجنٹا' ;

}

تاہم، HTML عنصر میں آئی ڈی استعمال کرنے اور querySelector() طریقہ استعمال کرکے اس تک رسائی حاصل کرنے کے لیے، ' # شناختی نام کے ساتھ سائن کریں:

دستاویز سوال سلیکٹر ( '#رنگ' ) . انداز . رنگ = 'میجنٹا' ;

آؤٹ پٹ

ہم نے جاوا اسکرپٹ میں متن کا رنگ تبدیل کرنے کا آسان طریقہ جمع کیا ہے۔

نتیجہ

متن کا رنگ تبدیل کرنے کے لیے، آپ getElementById() طریقہ یا querySelector() طریقہ کی مدد سے style.color پراپرٹی استعمال کرسکتے ہیں۔ getElementById() طریقہ اس کی تفویض کردہ id کی بنیاد پر HTML عنصر تک رسائی حاصل کرنے کے لیے استعمال کیا جاتا ہے، جب کہ querySelector() طریقہ تفویض کردہ id یا کلاس کی بنیاد پر بالترتیب (#) یا (.) نشانیاں بتا کر عنصر تک رسائی حاصل کرتا ہے۔ اس مطالعہ نے جاوا اسکرپٹ میں متن کا رنگ تبدیل کرنے کے آسان طریقہ کار کی وضاحت کی۔