یہ گائیڈ JavaScript میں HTML DOM عنصر 'سٹائل' پراپرٹی کے مقصد اور کام کے بارے میں وضاحت کرتا ہے۔
جاوا اسکرپٹ میں HTML DOM عنصر 'اسٹائل' پراپرٹی کیسے کام کرتی ہے؟
ایچ ٹی ایم ایل ڈوم ' انداز ” صرف پڑھنے کی خاصیت ہے جو اس کے مطابق مختص اسٹائلنگ خصوصیات کی بنیاد پر کام کرتی ہے۔ اس کے علاوہ، یہ واپس کرتا ہے ' سی ایس ایس اسٹائل ڈیکلریشن ” آبجیکٹ جس میں مخصوص HTML عنصر کی تمام ان لائن سٹائل کی خصوصیات شامل ہیں۔
نوٹ: 'CSSStyleDeclaration' آبجیکٹ میں ہیڈ سیکشن میں بیان کردہ CSS اسٹائل کی خصوصیات شامل ہیں۔
نحو (ایک اسٹائل پراپرٹی سیٹ کریں)
عنصر انداز . جائیداد = قدرمندرجہ بالا نحو کے مطابق، ' انداز 'پراپرٹی صرف ایک پیرامیٹر کو سپورٹ کرتی ہے' قدر ' جو مخصوص اسٹائلنگ پراپرٹی کی قدر کی نمائندگی کرتا ہے۔
نحو (ایک طرز کی جائیداد واپس کریں)
عنصر انداز . جائیدادآئیے 'اسٹائل' پراپرٹی کے اوپر زیر بحث نحو کو عملی طور پر نافذ کریں۔
مثال 1: کسی خاص HTML عنصر کا رنگ سیٹ کرنے کے لیے 'اسٹائل' پراپرٹی کا استعمال کریں
یہ مثال 'کے بنیادی نحو کا اطلاق کرتی ہے۔ انداز 'اسٹائل' خاصیت کی قدر کو متعین کرنے کے لیے اس طرح کہ مخصوص HTML عنصر کا رنگ بدل جائے۔
HTML کوڈ
سب سے پہلے، دیئے گئے HTML کوڈ کے ذریعے جائیں:
< h2 > جاوا اسکرپٹ میں اسٹائل پراپرٹی کا استعمال کریں۔ h2 >
< h3 آئی ڈی = 'H3' > دوسرا ذیلی عنوان۔ h3 >
مندرجہ بالا کوڈ لائنوں میں:
- ' HTML ٹیگ پہلی ذیلی سرخی کی وضاحت کرتا ہے۔
- ' ٹیگ ایک تفویض کردہ id 'H3' کے ساتھ سطح 3 کی دوسری ذیلی سرخی بناتا ہے۔
جاوا اسکرپٹ کوڈ
اگلا، بیان کردہ جاوا اسکرپٹ کوڈ پر عمل کریں:
< سکرپٹ >دستاویز getElementById ( 'H3' ) . انداز . رنگ = 'سبز' ;
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں، ' document.getElementById() 'طریقہ شامل تک رسائی حاصل کرتا ہے' 'عنصر اس کی شناخت کے ذریعے' H3 'مخصوص سیٹ کرنے کے لیے' رنگ عنصر کی خصوصیت قدر کے ذریعے style.color ' جائیداد.
آؤٹ پٹ
آؤٹ پٹ سے پتہ چلتا ہے کہ ہدف شدہ HTML عنصر کی بصری نمائندگی 'اسٹائل' پراپرٹی کا استعمال کرتے ہوئے اس کے مطابق ترتیب دی گئی ہے۔
مثال 2: لاگو 'اسٹائل' وصف کی قدر حاصل کرنے کے لیے 'اسٹائل' پراپرٹی کا استعمال کریں
اس مثال میں، 'اسٹائل' پراپرٹی HTML عنصر کی تفویض کردہ 'اسٹائل' خصوصیت کو اس کے عمومی نحو (Return a style Property) کا استعمال کرتے ہوئے تلاش کرنے میں مدد کرتی ہے۔
HTML کوڈ
HTML کوڈ یہاں بیان کیا گیا ہے:
< h2 > جاوا اسکرپٹ میں اسٹائل پراپرٹی کا استعمال کریں۔ h2 >< h3 آئی ڈی = 'H3' انداز = 'پس منظر کا رنگ: نارنجی؛' > دوسرے ذیلی سرخی والے پس منظر کے رنگ کی قدر ہے۔ : h3 >
< h4 آئی ڈی = 'ڈیمو' >> h4 >
اس کوڈ میں:
- ' ایچ ٹی ایم ایل ٹیگ 'اسٹائل' وصف کا استعمال کرتا ہے جو '
' HTML عنصر کے پس منظر کا رنگ سیٹ کرتا ہے۔
- ' 'ٹیگ لیول 4 کی ایک خالی ذیلی سرخی بناتا ہے جس میں ایک ID ہے' ڈیمو '
جاوا اسکرپٹ کوڈ
اب، دیئے گئے جاوا اسکرپٹ کوڈ کو دیکھیں:
< سکرپٹ >const قدر = دستاویز getElementById ( 'H3' ) . انداز . پس منظر کا رنگ ;
دستاویز getElementById ( 'ڈیمو' ) . اندرونی ایچ ٹی ایم ایل = قدر ;
سکرپٹ >
اوپر لکھے ہوئے کوڈ میں:
- متغیر ' قدر 'کے ساتھ اعلان کیا جاتا ہے' const ' مطلوبہ لفظ جو لاگو ہوتا ہے ' document.getElementById() لاگو کردہ 'اسٹائل' وصف کی قدر حاصل کرنے اور اسے عنصر پر لاگو کرنے کے لیے '
' عنصر کو حاصل کرنے کا طریقہ۔
- 'document.getElementById()' کا طریقہ دوبارہ شامل کردہ خالی '
' عنصر تک رسائی حاصل کرنے کے لیے استعمال کیا جاتا ہے اور حاصل کیے گئے HTML عنصر کے خلاف مختص 'سٹائل' وصف کی قدر ظاہر کرتا ہے اور اسے ذیلی سرخی کے طور پر شامل کرتا ہے۔ اندرونی ایچ ٹی ایم ایل ' جائیداد.
آؤٹ پٹ
آؤٹ پٹ عنصر پر پس منظر کا رنگ لاگو کرتا ہے اور سیٹ 'اسٹائل' وصف کی قدر بھی اسی کے مطابق لوٹائی جاتی ہے۔
نتیجہ
جاوا اسکرپٹ استعمال کرتا ہے ' انداز HTML DOM عنصر کی ان لائن 'سٹائل' خصوصیات کو تفویض کرنے اور واپس کرنے کے لیے پراپرٹی۔ اس کے مطابق مطلوبہ فعالیت کو لاگو کرنے کے لیے ایک اضافی 'قدر' کی ضرورت ہوتی ہے۔ ترتیب دینے اور بازیافت کرنے کے علاوہ، موجودہ 'اسٹائل' وصف کو تبدیل کرنا بھی فائدہ مند ہے۔ اس گائیڈ نے HTML DOM عنصر طرز پراپرٹی کے بنیادی مقصد، کام کرنے، اور عملی نفاذ کا مظاہرہ کیا۔