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

JavaScript میں، ایسے ویب صفحات ہیں جن کے لیے ایک پرکشش ترتیب کی ضرورت ہوتی ہے، جیسے کہ گہرے پس منظر جو عام طور پر انٹرفیس کے لیے بہتر کام کرتے ہیں۔ اسی طرح، سفید پس منظر قارئین کو مواد پر توجہ مرکوز کرنے دیتے ہیں، اور اسی طرح نیوز پورٹلز یا بلاگز گہرے متن کے ساتھ نسبتاً ہلکے پس منظر کا استعمال کرتے ہیں۔ ایسے معاملات میں، جاوا اسکرپٹ فارمیٹنگ اور دستاویز کے ڈیزائن کو بہتر بنانے میں بہت کارآمد ہو جاتا ہے۔

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

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

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

• ' پس منظر کی تصویر 'پر پراپرٹی' ڈوم '
• ' getElementById() 'طریقہ اور' پس منظر کی تصویر 'پر پراپرٹی' پیراگراف '

ایک ایک کرکے زیر بحث طریقوں سے گزریں!

طریقہ 1: DOM پر backgroundImage پراپرٹی کا استعمال کرتے ہوئے JavaScript میں پس منظر کی تصویر تبدیل کریں۔

' پس منظر کی تصویر پراپرٹی مخصوص عنصر کے پس منظر کی تصویر کو ایڈجسٹ کرتی ہے۔ اس تکنیک کو بیک گراؤنڈ امیج پراپرٹی کو لاگو کرکے اور بیک گراؤنڈ امیج کو دلیل کے طور پر اس کا راستہ تلاش کرکے اس کا اطلاق کیا جاسکتا ہے۔

نحو

مندرجہ بالا نحو میں، ' URL ” سے مراد تصویر کا راستہ ہے۔

مظاہرے کے لیے درج ذیل مثال کو دیکھیں۔

مثال

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

اب، ایک فنکشن ' پس منظر کی تصویر() 'اعلان کیا جائے گا اور' document.body.style.backgroundImage ' پراپرٹی اپنی دلیل میں مخصوص تصویری راستے کا استعمال کرتے ہوئے پس منظر کی تصویر تک رسائی حاصل کرے گی:

مندرجہ بالا عمل درآمد کا نتیجہ مندرجہ ذیل ہوگا:

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

' getElementById() ' طریقہ ایک عنصر کو ایک مخصوص قدر کے ساتھ لوٹاتا ہے اور ' پس منظر کی تصویر ” پراپرٹی، جیسا کہ اوپر بیان کیا گیا ہے، اس کی دلیل میں مخصوص عنصر کی پس منظر کی تصویر لوٹاتا ہے۔ یہ طریقہ مخصوص پیراگراف کے پس منظر پر مخصوص رنگ کا نقشہ بنانے کے لیے لاگو کیا جا سکتا ہے۔

نحو

یہاں، ' عناصر ' سے مراد ایک عنصر کی شناخت ہے۔

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

مثال

پہلے،

ٹیگ میں ایک پیراگراف شامل کریں اور اسے ایک مخصوص آئی ڈی تفویض کریں:

اگلا، ایک بٹن بنائیں جس میں ایک آنکلک ایونٹ تک رسائی ہو جس میں فنکشن backgroundImage() تک رسائی ہو جیسا کہ پچھلے طریقہ میں زیر بحث آیا ہے:

آخر میں، 'نامی فنکشن کا اعلان کریں پس منظر کی تصویر() 'اسی طرح. یہاں، 'کا استعمال کرکے متعین آئی ڈی تک رسائی حاصل کریں۔ getElementById() ” طریقہ اور اس پر مخصوص پس منظر کی تصویر لگائیں۔ اس کے نتیجے میں پیراگراف کے پس منظر پر رنگ کا نفاذ ہوگا:

آؤٹ پٹ

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

نتیجہ

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