هذا المنشور يقلل من عمل واستخدام خاصية 'backgroundImage' لنمط HTML DOM.
كيفية استخدام خاصية 'backgroundImage' لـ HTML DOM Style في JavaScript؟
نمط HTML DOM ' الصورة الخلفية ”لتخصيص عنصر HTML والمستند من خلال إلحاق صورة خلفية بالإشارة إلى مسارها.
بناء الجملة (إعداد خاصية 'backgroundImage')
هدف. أسلوب . الصورة الخلفية = 'url ('URL') | لا شيء | أولي | توارث'تدعم البنية أعلاه قيم خاصية 'backgroundImage' التالية:
- url ('URL'): يحدد موقع صورة الخلفية المطلوبة.
- لا أحد: يمثل القيمة الافتراضية ، أي لا توجد صورة خلفية.
- أولي: إنه مشابه للقيمة الافتراضية للمتصفح.
- يرث: يرث الخاصية من عنصرها الأصلي.
بناء الجملة (إرجاع عنوان URL لخاصية 'backgroundImage')
هدف. أسلوب . الصورة الخلفيةيقوم بناء الجملة هذا بإرجاع قيمة السلسلة التي تحتوي على عنوان URL لصورة الخلفية المضافة.
دعنا نستخدم التركيبات المحددة أعلاه عمليًا لشرح استخدام خاصية النمط 'backgroundImage'.
مثال 1: تطبيق خاصية Style “backgroundImage” لتعيين صورة الخلفية
يطبق هذا المثال النمط ' الصورة الخلفية 'لتعيين صورة الخلفية المطلوبة للمستند عن طريق تحديد عنوان URL الخاص به.
كود HTML
أولاً ، ألق نظرة على كود HTML المذكور:
< h2 > يستخدم لغة البرمجة DOM أسلوب خاصية backgroundImage في JavaScript h2 >
< زر عند النقر = 'myFunc ()' > انقر هنا زر >
في هذا الكود:
- ال ' 'تضيف العنوان الفرعي للمستوى 2.
- ال ' <زر> 'ينشئ زرًا مرفقًا به' عند النقر 'حدث لتنفيذ الوظيفة' myFunc () 'عند النقر فوق الزر.
كود جافا سكريبت
بعد ذلك ، اتبع كود JavaScript المحدد:
< النصي >وظيفة myFunc ( ) {
وثيقة. جسم . أسلوب . الصورة الخلفية = 'url ('./ html & css / image.jpg')' ؛
}
النصي >
في مقتطف الشفرة أعلاه:
- الوظيفة المسماة ' myFunc () ' ويعرف.
- في تعريفه ، ' style.backgroundImage. الصورة 'تطبق خاصية' URL 'صورة لخلفية المستند بأكمله.
انتاج |
يوضح الإخراج أن صورة الخلفية تضاف إلى المستند بأكمله عند النقر فوق الزر.
مثال 2: تطبيق خاصية Style “backgroundImage” لإعادة عنوان URL لصورة الخلفية
ال ' الصورة الخلفية 'مفيدة أيضًا في عرض عنوان URL لصورة الخلفية. دعونا نرى ذلك عمليا.
كود HTML
أولاً ، انتقل إلى كود HTML المكتوب:
< h2 > يستخدم لغة البرمجة DOM أسلوب خاصية backgroundImage في JavaScript h2 >< معرف شعبة = 'myDiv' أسلوب = 'الارتفاع: 500 بكسل ؛ العرض: 500 بكسل ؛
الحد: 3 بكسل أسود خالص ؛ صورة الخلفية: url ('./ html & css / image.jpg') ' > هذا هو div شعبة >
< معرف h4 = 'عرض' > h4 >
في كتلة التعليمات البرمجية أعلاه:
- ال ' الصورة الخلفية 'في عنصر' 'الذي يضيف صورة خلفية مطابقة لعنوان URL المحدد.
- ال ' 'ينشئ عنصرًا فرعيًا فارغًا للمستوى 4 يعرض القيمة التي تم إرجاعها (URL) لصورة الخلفية المضافة.
كود جافا سكريبت
الآن ، انتقل إلى كود JavaScript:
< النصي >
اسمحوا IMG = وثيقة. getElementById ( 'myDiv' ) . أسلوب . الصورة الخلفية ؛
وثيقة. getElementById ( 'عرض' ) . داخلي HTML = IMG ؛
النصي >في كتلة التعليمات البرمجية هذه:
- نعلن المتغير ' IMG 'التي تستخدم' document.getElementById () 'للوصول إلى عنصر' 'عبر معرفه' myDiv 'وتطبيق صورة خلفية عبر' الصورة الخلفية ' ملكية.
- بعد ذلك ، تقوم طريقة 'document.getElementById ()' بجلب العنوان الفرعي الفارغ باستخدام المعرف 'demo' لعرض عنوان URL لصورة الخلفية الملحقة.
انتاج |
يعرض الإخراج عنوان URL لصورة الخلفية المطبقة على عنصر 'div'.
خاتمة
يستخدم JavaScript النمط ' الصورة الخلفية 'لتعيين صورة الخلفية لعنصر HTML المطلوب أو إعادة عنوان URL الخاص به. وهو يدعم أربع قيم خاصية لتعيين صورة الخلفية بما في ذلك 'الأولي' و 'وراثة' و 'عنوان URL' و 'لا شيء'. ومع ذلك ، فإنه لا يدعم أي قيمة للحصول على عنوان URL لصورة الخلفية. قدم هذا المنشور وصفًا موجزًا لاستخدام خاصية 'backgroundImage' بنمط HTML DOM في JavaScript.