واحدة من أكثر الطرق شيوعا لتغيير نمط العناصر على صفحة الويب باستخدام جافا سكريبت هي استخدام خاصية لون الخلفية. تتيح لك هذه الخاصية تعيين لون الخلفية للعنصر أو مجموعة العناصر المحددة.
لبدء العمل مع هذه الخاصية ، يجب عليك أولا العثور على العنصر المطلوب باستخدام جافا سكريبت. ويمكن القيام بذلك باستخدام أساليب مختلفة مثل جيتليمنتبيد ، جيتليمنتسبيكلاسينام ، كيريسيليكتور وغيرها. بمجرد العثور على عنصر ، يمكنك البدء في تغيير أسلوبه.
لتطبيق نمط لون الخلفية ، استخدم خاصية النمط لكائن العنصر. على سبيل المثال ، لتغيير لون الخلفية لعنصر باستخدام المعرف "العنصر الخاص بي" ، يمكنك كتابة الكود التالي:
عنصر فار = وثيقة.جيتليمنتبيد ("عنصر بلدي");
عنصر.أسلوب.الخلفية اللون = "أحمر";
في هذا المثال ، نجد أولا العنصر مع معرف " عنصر بلدي "باستخدام طريقة جيتليمنتبيد ، ومن ثم تغيير الخاصية باكغروندكولور إلى اللون"الأحمر".
- إضافة نمط لون الخلفية لعنصر جس وجدت
- تعليمات الاستخدام
- أمثلة الاستخدام
- سؤال وجواب
- كيف يمكنني إضافة نمط لون الخلفية إلى عنصر تم العثور عليه باستخدام جافا سكريبت?
إضافة نمط لون الخلفية لعنصر جس وجدت
واحدة من أهم المهام في تطوير الويب هي تغيير نمط عنصر في الصفحة باستخدام جافا سكريبت. واحدة من أكثر الوظائف شيوعا وفائدة هي تغيير خلفية العنصر. في هذه المقالة ، سننظر في كيفية إضافة نمط لون الخلفية إلى عنصر موجود باستخدام جافا سكريبت.
أولا ، تحتاج إلى العثور على العنصر الذي تريد إضافة نمط لون الخلفية إليه أو تحديده. ويمكن القيام بذلك باستخدام أساليب مختلفة مثل جيتليمنتبيد ، كيريسيليكتور ، أو جيتليمنتسبيكلاسينام. على سبيل المثال:
هذا هو عنصر ديف
بعد العثور على العنصر المطلوب ، يمكننا إضافة نمط لون الخلفية باستخدام خاصية النمط.الخلفية اللون. للقيام بذلك ، حدد لون الخلفية للعنصر في عرافة ، شكل رغب أو اسم اللون:
هذا هو عنصر ديف
,
الحصول على عناصرالاسم. على سبيل المثال:
عنصر فار = وثيقة.جيتليمينتبيد ('مياليمنت');
أضف نمط لون الخلفية إلى العنصر الموجود. يمكنك القيام بذلك باستخدام
خاصية النمط.الخلفية اللون
. على سبيل المثال:
عنصر.أسلوب.الخلفية اللون = 'أحمر';
قد يبدو مثال الكود الكامل كما يلي:
- دعنا نغير خلفية جميع العناصر بفئة معينة إلى اللون الأصفر:
- const randomColor = getRandomColor();
elements[i].style.backgroundColor = randomColor;