Sales1 min read118 words

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

Emir Eskici

PlusClouds Author

Cloud & SaaS

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

تغيير الخلفية باستخدام 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" }

النتيجة

الوصف

LeadOcean

Sales team chasing the wrong leads?

1.8B+ companies — search always free

Find My Leads →

No credit card · Cancel anytime

Frequently Asked Questions

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

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

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

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

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

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

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

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

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

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

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

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

Related Reading

Posts tagged with:

The ICP-to-Pipeline Flywheel: How to Use Firmographic Filters, Buying Signals, and AI Matching to Fill Your CRM With Accounts That Are Ready to Buy Now
Sales

The ICP-to-Pipeline Flywheel: How to Use Firmographic Filters, Buying Signals, and AI Matching to Fill Your CRM With Accounts That Are Ready to Buy Now

Most B2B ideal customer profile (ICP) definitions never make it into the CRM tools sales reps actually use. This guide shows how to translate ICP attributes into compound firmographic filters, layer real-time buying signals on top, score every matching account with an AI match engine, and sync ranked records into HubSpot or Salesforce automatically using LeadOcean and Eaglet by PlusClouds.

The 48-Hour Activation Window: How to Turn a Buying Signal into a Booked Meeting Before Your Competitor Even Sees It
Sales

The 48-Hour Activation Window: How to Turn a Buying Signal into a Booked Meeting Before Your Competitor Even Sees It

B2B buying signals decay fast, and most sales teams lose the advantage by waiting days to act. This guide breaks down how to build a 48-hour activation workflow using LeadOcean and Eaglet to turn raw intent signals into personalised, booked meetings before competitors even open their CRM.

How to Build a First-Party Intent Stack That Feeds LeadOcean: From Website Visitor to Verified Decision-Maker in One Workflow
Sales

How to Build a First-Party Intent Stack That Feeds LeadOcean: From Website Visitor to Verified Decision-Maker in One Workflow

Most B2B demand-generation teams ignore the buying signals already embedded in their own website, content, and product analytics. This guide explains how to build a first-party intent stack that resolves anonymous visitor traffic into verified decision-maker contacts, applies composite intent scoring, and routes high-intent accounts into HubSpot or Salesforce automatically using LeadOcean and Eaglet by PlusClouds.

Signal-First Outbound: How to Build a Personalized-at-Scale Prospecting System That Gets 18 % Reply Rates
Sales

Signal-First Outbound: How to Build a Personalized-at-Scale Prospecting System That Gets 18 % Reply Rates

B2B inboxes in 2026 are overwhelmed with generic cold email, pushing market-wide reply rates below 2%. This guide explains how to build a signal-first, personalized-at-scale outbound system that consistently achieves 18% reply rates by triggering outreach on real buying events and using AI-powered enrichment tools like LeadOcean and Eaglet.