كيفية تغيير صورة الخلفية في JavaScript

في JavaScript ، هناك صفحات ويب تحتاج إلى تخطيط جذاب ، مثل الخلفيات الداكنة التي تعمل عادةً بشكل أفضل مع الواجهات. وبالمثل ، تسمح الخلفيات البيضاء للقراء بالتركيز على المحتوى ، وبالتالي تستخدم بوابات الأخبار أو المدونات خلفية فاتحة نسبيًا بنص غامق. في مثل هذه الحالات ، يصبح JavaScript مفيدًا جدًا في تنسيق تصميم المستند وتحسينه.

ستناقش هذه المقالة طرق تغيير صورة الخلفية في JavaScript.

كيفية تغيير صورة الخلفية في JavaScript؟

لتغيير صورة الخلفية في JavaScript ، يمكن استخدام الأساليب التالية:

• ' الصورة الخلفية 'الملكية على' DOM '.
• ' getElementById () 'الطريقة و' الصورة الخلفية 'الملكية على' فقرة '.

اذهب من خلال الطرق التي تمت مناقشتها واحدة تلو الأخرى!

الطريقة الأولى: تغيير صورة الخلفية في JavaScript باستخدام خاصية backgroundImage على DOM.

ال ' الصورة الخلفية تضبط الخاصية 'صورة الخلفية للعنصر المحدد. يمكن تطبيق هذه التقنية من خلال تطبيق خاصية backgroundImage وتحديد صورة الخلفية عن طريق تحديد مسارها كوسيطة.

بناء الجملة

في الصيغة أعلاه ، ' URL 'يشير إلى مسار الصورة.

انظر إلى المثال التالي للتوضيح.

مثال

في هذا المثال ، سيتم تضمين زر مع القيمة المحددة و ' عند النقر 'إعادة توجيه الحدث إلى ملف
الوظيفة المسماة backgroundImage ():

الآن ، وظيفة ' الصورة الخلفية() سيتم الإعلان عن ' document.body.style.backgroundImage 'ستصل الخاصية' إلى صورة الخلفية باستخدام مسار الصورة المحدد في الوسيطة الخاصة بها:

ناتج التنفيذ أعلاه سينتج على النحو التالي:

الطريقة 2: تغيير صورة الخلفية في JavaScript باستخدام أسلوب getElementById () وخاصية backgroundImage في الفقرة

ال ' getElementById () 'طريقة إرجاع عنصر بقيمة محددة و' الصورة الخلفية '، كما هو مذكور أعلاه ، يعرض صورة الخلفية لعنصر معين محدد في الوسيطة الخاصة به. يمكن تطبيق هذه الطريقة لتعيين اللون المحدد على خلفية فقرة معينة.

بناء الجملة

هنا، ' عناصر 'يشير إلى معرف العنصر.

راجع المثال التالي للحصول على فهم أفضل للمفهوم المذكور.

مثال

أولاً ، قم بتضمين فقرة في العلامة

وقم بتعيين معرف محدد لها:

بعد ذلك ، قم بإنشاء زر بحدث onclick للوصول إلى الوظيفة backgroundImage () كما تمت مناقشته في الطريقة السابقة:

أخيرًا ، أعلن عن الوظيفة المسماة ' الصورة الخلفية() ' بصورة مماثلة. هنا ، قم بالوصول إلى المعرف المحدد باستخدام ' getElementById () 'وتطبيق صورة الخلفية المحددة عليها. سينتج عن ذلك تطبيق اللون على خلفية الفقرة:

انتاج |

قمنا بتجميع أسهل طريقة لتغيير صورة الخلفية في جافا سكريبت

استنتاج

لتغيير صورة الخلفية في جافا سكريبت ، قم بتطبيق “ الصورة الخلفية 'الملكية على' DOM 'لتطبيق صورة الخلفية المحددة على صفحة الويب بأكملها باستخدام وظيفة أو عن طريق الحصول على معرف معين باستخدام' getElementById () 'الطريقة وتطبيق' الصورة الخلفية 'الخاصية على' فقرة '. توضح هذه المدونة طرق تغيير صور الخلفية في JavaScript.