Sales1 min read118 words

لنقم بتطوير تطبيق صغير يغير الخلفية ببساطة باستخدام JavaScript

Emir Eskici

Emir Eskici

PlusClouds Author

Cloud & SaaS

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

تغيير الخلفية باستخدام JavaScript

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

wordpress6.2_Banner.jpg

للمشاريع / التطبيقات الأخرى (انظر: المدونة)

HTML

لنقوم أولاً بإنشاء مجموعة من الأزرار التي ستوفر لنا خيارات الألوان المطلوبة، ومن ثم نضيف لها خاصية onClick من جانب HTML
الوصف

JS

لنقم بتعريف دوال onClick التي أضفناها للأزرار في كود HTML الخاص بنا.

function green(){
    document.getElementById("ColorBody").style.backgroundColor="green"
}
// ببساطة اخترت العنصر الذي لديه Id يسمى ColorBody وأعطيت خلفية باللون الأخضر باستخدام خاصية style backgroundColor
function red(){
    document.getElementById("ColorBody").style.backgroundColor="red"
}

function blue(){ document.getElementById("ColorBody").style.backgroundColor="blue" }

function yellow(){ document.getElementById("ColorBody").style.backgroundColor="yellow" }

النتيجة

الوصف

Frequently Asked Questions

كيف أغير لون الخلفية باستخدام JavaScript كما يشرح في المدونة؟

الفكرة هي وجود أزرار تمنح خيارات ألوان للخلفية، مع ربط كل زر بدالة onClick في HTML. الدوال المنشورة مثل green وred وblue وyellow تقوم بتعيين لون الخلفية من خلال العنصر المعرف ColorBody.

ما هو العنصر المستهدف لتغيير لون الخلفية؟

العنصر المستهدف هو العنصر الذي يحمل المعرف ColorBody؛ عند استدعاء الدالة يتم تعديل خاصية backgroundColor لهذا العنصر.

كيف تتم ربط الأزرار بالدوال على حدث النقر في الكود؟

يتم ربط كل زر بدالة onClick محددة مثل green أو red في كود HTML، فينفّذ النقر الدالة وتغيّر اللون.

ما أسماء الدوال التي تغير الألوان في المثال؟

الدوال هي green وred وblue وyellow، وكل دالة تضع اللون المقابل كخلفية.

هل يمكن إضافة لون إضافي إلى الكود لتغيير الخلفية؟

نعم، يمكن إضافة دالة جديدة تشبه الموجودة وتعيين الخلفية للون الجديد، ثم ربطها بزر إضافي في HTML.

ماذا يظهر في النتيجة عند تجربة التطبيق؟

النتيجة تُظهر تطبيقًا بسيطًا يغير الخلفية وتعرض صورة GIF توضح النتيجة في نهاية المنشور.