اذهب إلى المحتوى
  • 0

كيف اغير لون النص والخلفيه بناءً على تغير القيمه

Abdulrahman Dev

السؤال

السلام عليكم ورحمة الله وبركاته ..

لدي سؤال :

اذا كان لدي قيمه تاتي من قاعده البيانات واريد التحكم في لون القيمه والخلفيه الخاصه بها بناء على القيمه المعاده .

مثال : 

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

حاله الطلب لها اربعه قيم : 

طلب جديد 

طلب تحت الاجراء

طلب مقبول

طلب مرفوض 

 

وكل قيمه من هذه اريد تخصيص لها لون للنص ولون للخلفيه ، فهل من الممكن عملها بال css او الجافا سكربت وشرح طريقه عملها .

 

وشكرا لكم 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

وفكرة الحل في حال كان يتم الاتصال بخادم الويب من خلال API:

fetch("https://example/com").then(
        (res) => {
            return res.json();
        }
    ).then(
        (data) => {
			let card = document.getElementById('order-card'); // للوصول إلى البطاقة المراد تغيير لون خلفيتها

            if(data.status === 'New'){ //اختبار حالة الطلب في حال كان جديد
				cart.style.backgroundColor = "green"; //تغيير لون خلفية العنصر أو البطاقة إلى اللون الأخضر
			}else if(data.status === 'Pending'){
				cart.style.backgroundColor = "red";
			}
			.....
        }
    )

إذا كنت تحصل على مصفوفة من البيانات سيتوجب عليك أيضاً إضافة حلقة تكرارية للمرور على هذه البيانات، كما يوجد العديد من الطرق الأخرى وطرق أسهل في حال كنت تستخدم إطار عمل معيّن مثل React أو Vue أو حتى Jquery في طرف المستخدم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...