كيف يمكنني تغيير صورة الخلفية باستخدام جافا سكريبت?

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

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

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

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

1. كيفية تغيير صورة الخلفية
2. أ) استخدام جافا سكريبت: خطوة بخطوة
3. ب) طرق تغيير صورة الخلفية
4. رمز لتغيير صورة الخلفية
5. أ) استخدام أساليب جافا سكريبت القياسية
6. سؤال وجواب
7. هل من الممكن تغيير صورة الخلفية على صفحة ويب باستخدام جافا سكريبت?
8. ما بناء الجملة يجب أن تستخدم لتغيير صورة الخلفية باستخدام جافا سكريبت?
9. أريد تغيير صورة الخلفية عند النقر على الزر. كيف يمكنني القيام بذلك باستخدام جافا سكريبت?
10. هل من الممكن تغيير صورة الخلفية باستخدام جافا سكريبت فقط على جزء معين من صفحة ويب?

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

يمكن تغيير صورة الخلفية باستخدام جافا سكريبت باستخدام خاصية النمط.الخلفية. تتيح لك هذه الخاصية تعيين المسار إلى ملف الصورة كصورة خلفية للعنصر.

1. قم بإنشاء عنصر تريد تطبيق صورة خلفية جديدة عليه. على سبيل المثال ، يمكن أن يكون عنصرا
2. .
3. إضافة معرف للعنصر بحيث يمكنك الوصول إليه باستخدام جافا سكريبت. فمثلا,.
4. في جافا سكريبت ، والعثور على العنصر باستخدام طريقة جيتليمنتبيد() وحفظه إلى متغير.

باستخدام متغير ، قم بتعيين صورة خلفية جديدة باستخدام خاصية النمط.الخلفية.

ميديف.أسلوب.باكغروندماج = " ورل ('المسار إلى الصورة.جبغ')";

عند تحديد المسار إلى الصورة في خاصية النمط.باكغروندماج تأكد من تحديد المسار بالنسبة إلى الدليل الجذر للمشروع الخاص بك أو المسار الكامل للصورة.

1. لذلك يمكنك بسهولة تغيير صورة الخلفية باستخدام جافا سكريبت باستخدام الطريقة المحددة.
2. أ) استخدام جافا سكريبت: خطوة بخطوة
3. يمكن تغيير صورة الخلفية باستخدام جافا سكريبت على النحو التالي:
4. إنشاء عنصر هتمل من شأنها أن تكون بمثابة زر لتغيير صورة الخلفية. يمكنك استخدام عنصر لهذا الغرض.

قم بتعيين معرف للزر باستخدام سمة المعرف بحيث يمكن الرجوع إليها في شفرة جافا سكريبت.

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

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

يوجد أدناه نموذج رمز يوضح كيفية تغيير صورة الخلفية باستخدام جافا سكريبت:

"'أتش تي أم أل

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

"`

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

1. استبدال ' مسار / إلى / صورة جديدة.جبغ ' إلى المسار إلى الصورة الجديدة التي تريد استخدامها كخلفية.

   ب) طرق تغيير صورة الخلفية

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

2. تغيير رابط الصورة:

   أسهل طريقة لتغيير صورة الخلفية هي تغيير عنوان ورل للصورة باستخدام خاصية النمط.الخلفية. تسمح لك هذه الخاصية بتعيين عنوان ورل للصورة كسلسلة لاستخدامها كصورة خلفية. على سبيل المثال:

   عنصر.أسلوب.باكغروندماج = ' ورل ("مسار جديد للصورة.جبغ")';

3. صور فار = ['____11.јрд ', 'путь_к_изображению2.јрд ', 'путь_к_изображению3.јрд '];
4. صورة خلفية الرسوم المتحركة:

صور فار = ['____11.јрд ', 'путь_к_изображению2.јрд ', 'путь_к_изображению3.јрд '];

فار راندمندكس = الرياضيات.الكلمة (الرياضيات.عشوائي () * الصور.الطول);

2. di ('ديف').المغلق ('الخلفية صورة' ، ' ورل ("'+صور[راندمندكس]+'")').تحريك ({ العتامة: 1} ، 1000);

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

3. رمز لتغيير صورة الخلفية

لتغيير صورة الخلفية باستخدام جافا سكريبت ، يمكنك استخدام الخلفيةخاصية الصورة للعنصر.

نموذج التعليمات البرمجية:

إنشاء عنصر نريد تغيير صورة الخلفية من أجله:

• في شفرة جافا سكريبت نجد هذا العنصر:

عنصر فار = وثيقة.جيتليمينتبيد ("مياليمنت");

1. تعيين صورة خلفية جديدة:
2. عنصر.أسلوب.باكغروندماج = " ورل ('صورة جديدة.جبغ')";

حيث الجديد هو الصورة.جبغ هو المسار إلى الصورة الجديدة التي تريد تعيينها كخلفية.

الآن سيتم تغيير صورة الخلفية للعنصر مع معرف "النخاع" إلى صورة جديدة.

أ) استخدام أساليب جافا سكريبت القياسية

• هناك عدة طرق لتغيير صورة الخلفية باستخدام طرق جافا سكريبت القياسية. دعونا ننظر إليها بمزيد من التفصيل.

الطريقة 1: استخدام خاصية النمط.الخلفية

1. يمكنك استخدام خاصية النمط لتغيير صورة الخلفية لعنصر ما.الخلفية. للقيام بذلك ، اتبع الخطوات التالية:
2. ابحث عن العنصر المطلوب في الصفحة باستخدام طريقة جيتليمنتبيد أو طرق بحث العناصر الأخرى.

قم بتعيين صورة خلفية جديدة عن طريق تعيين قيمة لخاصية النمط.باكغروندماج باستخدام سلسلة تحتوي على المسار إلى الصورة.

نموذج التعليمات البرمجية:

عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');

عنصر.أسلوب.الخلفية = " عنوان ورل ("الخلفية الجديدة.جبغ")';

الطريقة 2: استخدام فئات كس

طريقة أخرى لتغيير صورة الخلفية قد تكون لاستخدام فئات كس. للقيام بذلك ، اتبع الخطوات التالية:

إنشاء فئة كس التي تحدد صورة الخلفية المطلوبة باستخدام خاصية صورة الخلفية.

أضف هذه الفئة إلى العنصر المطلوب باستخدام قائمة الفئات.إضافة طريقة.

نموذج التعليمات البرمجية:

عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');

عنصر.قائمة الفصل.إضافة ('نيوباكغروند');

في ملف كس:

.نيوباكغروند {

صورة الخلفية:عنوان ورل ("الخلفية الجديدة.جبغ");

}

وبالتالي ، باستخدام طرق جافا سكريبت القياسية ، يمكنك بسهولة تغيير صورة الخلفية لعنصر ما على صفحة الويب.

سؤال وجواب