یہ پوسٹ ایچ ٹی ایم ایل ڈوم اسٹائل 'بیک گراؤنڈ امیج' پراپرٹی کے کام اور استعمال کو لکھتی ہے۔
جاوا اسکرپٹ میں HTML DOM سٹائل 'backgroundImage' پراپرٹی کا استعمال کیسے کریں؟
ایچ ٹی ایم ایل ڈوم اسٹائل ' پس منظر کی تصویر ” پراپرٹی کا استعمال HTML عنصر اور دستاویز کو اپنی مرضی کے مطابق کرنے کے لیے اس کے راستے کا حوالہ دے کر بیک گراؤنڈ امیج شامل کر کے کیا جاتا ہے۔
نحو ('بیک گراؤنڈ امیج' پراپرٹی سیٹ کرنا)
چیز. انداز . پس منظر کی تصویر = 'url('URL')|none|initial|inherit'مندرجہ بالا نحو درج ذیل 'backgroundImage' پراپرٹی کی اقدار کی حمایت کرتا ہے:
- url('URL'): یہ مطلوبہ پس منظر کی تصویر کا مقام بتاتا ہے۔
- کوئی نہیں: یہ پہلے سے طے شدہ قدر کی نمائندگی کرتا ہے یعنی کوئی پس منظر کی تصویر نہیں۔
- ابتدائی: یہ براؤزر کی ڈیفالٹ ویلیو کی طرح ہے۔
- وراثت: اسے اپنے والدین کے عنصر سے جائیداد وراثت میں ملتی ہے۔
نحو ('بیک گراؤنڈ امیج' پراپرٹی کا ریٹرننگ یو آر ایل)
چیز. انداز . پس منظر کی تصویریہ نحو سٹرنگ ویلیو واپس کرتا ہے جس میں شامل کردہ پس منظر کی تصویر کا URL ہوتا ہے۔
آئیے طرز 'بیک گراؤنڈ امیج' پراپرٹی کے استعمال کی وضاحت کے لیے عملی طور پر اوپر بیان کردہ نحو کا استعمال کریں۔
مثال 1: بیک گراؤنڈ امیج سیٹ کرنے کے لیے اسٹائل 'backgroundImage' پراپرٹی کا اطلاق کریں
یہ مثال انداز کا اطلاق کرتی ہے ' پس منظر کی تصویر ' مطلوبہ پس منظر کی تصویر کو اس کا URL بتا کر دستاویز میں سیٹ کرنے کی خاصیت۔
HTML کوڈ
پہلے، بیان کردہ HTML کوڈ پر ایک نظر ڈالیں:
< h2 > استعمال کریں۔ ایچ ٹی ایم ایل ڈوم انداز جاوا اسکرپٹ میں پس منظر امیج پراپرٹی h2 >
< بٹن پر کلک کریں۔ = 'myFunc()' > یہاں کلک کریں بٹن >
اس کوڈ میں:
- ' ٹیگ سطح 2 کی ذیلی سرخی کو شامل کرتا ہے۔
- ' <بٹن> 'ٹیگ ایک بٹن بناتا ہے جس کے ساتھ منسلک ہوتا ہے' کلک پر ' تقریب کو انجام دینے کے لیے تقریب ' myFunc() بٹن پر کلک کریں۔
جاوا اسکرپٹ کوڈ
اگلا، دیئے گئے جاوا اسکرپٹ کوڈ پر عمل کریں:
< سکرپٹ >فنکشن myFunc ( ) {
دستاویز جسم . انداز . پس منظر کی تصویر = 'url('./html&css/image.jpg')' ;
}
سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- فنکشن کا نام ' myFunc() ' بیان کیا جاتا ہے.
- اس کی تعریف میں، ' style.backgroundImage 'پراپرٹی مخصوص لاگو ہوتی ہے' URL پوری دستاویز کے پس منظر کی تصویر۔
آؤٹ پٹ
آؤٹ پٹ سے پتہ چلتا ہے کہ بٹن پر کلک کرنے پر پس منظر کی تصویر پوری دستاویز میں شامل ہو جاتی ہے۔
مثال 2: پس منظر کی تصویر کا URL واپس کرنے کے لیے سٹائل 'backgroundImage' پراپرٹی کا اطلاق کریں
' پس منظر کی تصویر ” جائیداد پس منظر کی تصویر کے URL کو واپس کرنے کے لیے بھی فائدہ مند ہے۔ آئیے اسے عملی طور پر دیکھتے ہیں۔
HTML کوڈ
سب سے پہلے، تحریری HTML کوڈ کے ذریعے جائیں:
< h2 > استعمال کریں۔ ایچ ٹی ایم ایل ڈوم انداز جاوا اسکرپٹ میں پس منظر امیج پراپرٹی h2 >< div id = 'myDiv' انداز = 'اونچائی: 500px؛ چوڑائی: 500px؛
بارڈر: 3px ٹھوس سیاہ؛ پس منظر کی تصویر: url('./html&css/image.jpg')' > یہ ایک div ہے div >
< h4 آئی ڈی = 'ڈیمو' >> h4 >
مندرجہ بالا کوڈ بلاک میں:
- ' پس منظر کی تصویر ' پراپرٹی کو '' عنصر میں استعمال کیا جاتا ہے جو دیئے گئے یو آر ایل کے مطابق پس منظر کی تصویر کا اضافہ کرتا ہے۔
- ' ' عنصر لیول 4 کی ایک خالی ذیلی سرخی بناتا ہے جو شامل کردہ پس منظر کی تصویر کی واپسی ہوئی قدر (URL) دکھاتا ہے۔
جاوا اسکرپٹ کوڈ
اب، جاوا اسکرپٹ کوڈ پر جائیں:
< سکرپٹ >
آئی ایم جی کرنے دو = دستاویز getElementById ( 'myDiv' ) . انداز . پس منظر کی تصویر ;
دستاویز getElementById ( 'ڈیمو' ) . اندرونی ایچ ٹی ایم ایل = img ;
سکرپٹ >اس کوڈ بلاک میں:
- متغیر کا اعلان کریں ' img 'جو استعمال کرتا ہے' document.getElementById() اس کی id 'myDiv' کے ذریعے '' عنصر تک رسائی حاصل کرنے کا طریقہ اور 'کے ذریعے پس منظر کی تصویر کا اطلاق کرتا ہے۔ پس منظر کی تصویر ' جائیداد.
- اس کے بعد، 'document.getElementById()' طریقہ منسلک پس منظر کی تصویر کے URL کو ظاہر کرنے کے لیے اپنی id 'demo' کا استعمال کرتے ہوئے خالی ذیلی سرخی حاصل کرتا ہے۔
آؤٹ پٹ
آؤٹ پٹ 'div' عنصر پر لاگو پس منظر کی تصویر کا URL دکھاتا ہے۔
نتیجہ
جاوا اسکرپٹ سٹائل کا استعمال کرتا ہے ' پس منظر کی تصویر ” مطلوبہ HTML عنصر کو پس منظر کی تصویر تفویض کرنے یا اس کا URL واپس کرنے کی خاصیت۔ یہ بیک گراؤنڈ امیج سیٹ کرنے کے لیے چار پراپرٹی ویلیوز کو سپورٹ کرتا ہے جس میں 'ابتدائی'، 'وراثت'، 'URL' اور 'کوئی نہیں' شامل ہیں۔ تاہم، یہ پس منظر کی تصویر کا URL حاصل کرنے کے لیے کسی قدر کی حمایت نہیں کرتا ہے۔ اس پوسٹ نے جاوا اسکرپٹ میں HTML DOM سٹائل 'backgroundImage' پراپرٹی کو استعمال کرنے کے لیے ایک مختصر تفصیل فراہم کی ہے۔