یہ پوسٹ جاوا اسکرپٹ کا استعمال کرتے ہوئے HTML عنصر پر متعدد صفات کو سیٹ کرنے کے طریقہ کار کی وضاحت کرے گی۔
جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک عنصر پر متعدد اوصاف کیسے مرتب کریں؟
ایک ہی وقت میں ایک عنصر پر متعدد اوصاف متعین کرنے کے لیے، سب سے پہلے، انتساب کے ناموں اور اقدار کے ساتھ ایک آبجیکٹ بنائیں۔ ' کے ساتھ ایک صف کے طور پر آبجیکٹ کی چابیاں کی فہرست حاصل کریں Object.keys() ' طریقہ، پھر، مخصوص HTML عنصر پر تمام صفات کو ' کے ساتھ سیٹ کریں setAtribute() 'طریقہ.
نحو
دیئے گئے نحو کو setAttribute() طریقہ کے لیے استعمال کیا جاتا ہے:
عنصر setAtribute ( attrName، attrValue ) ;
مندرجہ بالا نحو میں دو پیرامیٹرز ہیں: نام 'اور' قدر '
- ' attrName ” نئی صفت کا نام ہے۔
- ' attrValue ” نئی صفت کی قدر ہے۔
- یہ طریقہ ایک نیا وصف بنائے گا اور اسے ایک قدر تفویض کرے گا۔ اگر مخصوص وصف پہلے سے موجود ہے، تو اس کی قدر کو اپ ڈیٹ کیا جائے گا۔
Object.keys() طریقہ کے لیے دیا گیا نحو استعمال کریں:
چیز . چابیاں ( چیز )یہ دیئے گئے آبجیکٹ کی ایک صف کو لوٹاتا ہے۔
مثال 1: forEach() طریقہ کا استعمال کرتے ہوئے ایک عنصر پر ایک سے زیادہ صفات سیٹ کریں
سب سے پہلے، HTML فائل میں ایک عنصر بنائیں:
< بٹن آئی ڈی = 'بٹن' > LINUXHINT بٹن >فی الحال، ویب صفحہ اس طرح نظر آئے گا:
جاوا اسکرپٹ کوڈ میں، سب سے پہلے، 'نامی چیز بنائیں عنصر کی خصوصیات اور آبجیکٹ میں نام اور اقدار کے ساتھ صفات شامل کریں۔ یہاں، ہم سٹائل وصف، عنصر کا نام، اور بٹن عنصر کے لیے غیر فعال پراپرٹی شامل کریں گے:
const عنصر کی خصوصیات = {انداز : 'پس منظر کا رنگ: rgb(153، 28، 49)؛ رنگ: سفید؛' ,
نام : 'لینکس بٹن' ,
معذور : '' ,
} ;
اب، ایک فنکشن کی وضاحت کریں جس کا نام ہے ' سیٹMultipleAttributesonElement 'جہاں پہلے کال کریں' Object.keys() ' آبجیکٹ کی کلیدوں کی صف حاصل کرنے کا طریقہ اور پھر استعمال کریں ' ہر ایک کے لئے() سرنی کے ذریعے اعادہ کرنے کا طریقہ اور آخر میں کال کریں setAtribute() مخصوص HTML عنصر پر تمام متعین صفات کو سیٹ کرنے کا طریقہ۔
فنکشن سیٹMultipleAttributesonElement ( عنصر، عنصر کی خصوصیات ) {چیز . چابیاں ( عنصر کی خصوصیات ) . ہر ایک کے لئے ( وصف => {
عنصر setAtribute ( وصف، elemAttribute [ وصف ] ) ;
} ) ;
}
کی مدد سے اس کی تفویض کردہ آئی ڈی کا استعمال کرتے ہوئے بٹن کو بازیافت کریں۔ getElementById() طریقہ:
const بٹن = دستاویز getElementById ( 'بٹن' ) ;متعین فنکشن کو طلب کریں ' سیٹMultipleAttributesonElement اور عنصر کو پہلی دلیل کے طور پر اور صفات کے اعتراض کو دوسری دلیل کے طور پر منتقل کریں:
سیٹMultipleAttributesonElement ( بٹن، عنصر کی خصوصیات ) ;آؤٹ پٹ سے پتہ چلتا ہے کہ بٹن کے متعدد صفات کامیابی کے ساتھ شامل کیے گئے ہیں:
آپ صفات کے لیے الگ آبجیکٹ بنائے بغیر کسی عنصر پر متعدد اوصاف بھی سیٹ کر سکتے ہیں۔ ایسا کرنے کے لیے، ذیل کی مثال پر عمل کریں۔
مثال 2: setAttribute() طریقہ کے ساتھ لوپ کا استعمال کرتے ہوئے ایک عنصر پر ایک سے زیادہ صفات سیٹ کریں
جاوا اسکرپٹ فائل میں دو پیرامیٹرز کے ساتھ ایک فنکشن کی وضاحت کریں اور اس کے اندر ایک سے زیادہ صفات سیٹ کرنے کے لیے ایک for لوپ کا استعمال کریں ' setAtribute() طریقہ:
فنکشن سیٹMultipleAttributesonElement ( عنصر، عنصر کی خصوصیات ) {کے لیے ( مجھے elemAttributes میں جانے دیں۔ ) {
عنصر setAtribute ( i، elemAttributes [ میں ] ) ;
}
}
بٹن کو اس کی تفویض کردہ آئی ڈی کا استعمال کرتے ہوئے بازیافت کریں:
const بٹن = دستاویز getElementById ( 'بٹن' ) ;نام کی قدر کے جوڑوں کی شکل میں بٹن عنصر اور متعدد صفات کو پاس کر کے متعین فنکشن کو کال کریں:
سیٹMultipleAttributesonElement ( بٹن { 'انداز' : 'پس منظر کا رنگ: rgb(153، 28، 49)؛ رنگ: سفید؛' , 'معذور' : '' , 'نام' : 'لینکس بٹن' } ) ;آؤٹ پٹ
ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے HTML عنصر پر متعدد صفات کو ترتیب دینے سے متعلق تمام ضروری معلومات کو مرتب کیا ہے۔
نتیجہ
JavaScript پہلے سے طے شدہ setAtribute() ایک عنصر کے لیے واحد یا ایک سے زیادہ اوصاف متعین کرنے کے لیے طریقہ استعمال کیا جاتا ہے۔ ایک عنصر پر ایک سے زیادہ اوصاف متعین کرنے کے لیے، سب سے پہلے، ایک ایسی آبجیکٹ بنائیں جس میں نام و اقدار کی شکل میں صفات ہوں۔ 'کا استعمال کرتے ہوئے ایک صف میں اشیاء کی چابیاں حاصل کریں Object.keys() 'طریقہ، پھر تمام صفات کو مخصوص عناصر پر مقرر کریں ' setAtribute() 'طریقہ. اس پوسٹ میں، ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے ایچ ٹی ایم ایل ایلیمنٹ پر متعدد اوصاف سیٹ کرنے کے طریقہ کار کی وضاحت کی ہے۔