ستصف هذه المقالة طرق إضافة CSS باستخدام JavaScript.
كيفية إضافة CSS مع JavaScript؟
في JavaScript ، يمكنك إضافة أنماط CSS إلى عنصر عن طريق تعديل خاصية النمط الخاصة به باستخدام الطرق أو الأساليب التالية:
الطريقة الأولى: إضافة CSS مع JavaScript باستخدام خاصية 'style'
لإضافة CSS إلى JavaScript ، استخدم ' أسلوب ' ملكية. يتم استخدامه للوصول إلى الأنماط المضمنة للعنصر ومعالجتها. إنه يعطي كائنًا يمثل الأنماط المضمنة لعنصر ما ويسمح للشخص بالحصول على خصائص نمط فردية أو تعيينها.
بناء الجملة
لإضافة نمط CSS في JavaScript ، يتم استخدام الصيغة التالية لـ ' أسلوب ' ملكية:
عنصر. أسلوب ؛
هنا، ' عنصر 'هو إشارة إلى عنصر HTML.
مثال
في المثال التالي ، سنقوم بتصميم الأزرار باستخدام JavaScript. أولاً ، سننشئ ثلاثة أزرار ونخصص لها معرفات ، مما يساعد على الوصول إلى عناصر الزر للتصميم:
< معرف الزر = 'btn2' > يرفض زر >
< معرف الزر = 'btn3' > يقبل زر >
قبل تصميم الإخراج سيبدو كما يلي:
الآن ، دعنا نصمم هذه الأزرار في جافا سكريبت باستخدام ' أسلوب ' ملكية. أولاً ، احصل على جميع عناصر الزر باستخدام المعرفات المخصصة لها بمساعدة ' getElementById () ' طريقة:
دعنا نتفق = وثيقة. getElementById ( 'btn1' ) ؛دعونا نرفض = وثيقة. getElementById ( 'btn2' ) ؛
دعنا نقبل = وثيقة. getElementById ( 'btn3' ) ؛
اضبط ألوان الخلفية لكل هذه الأزرار باستخدام زر ' أسلوب ' ملكية:
يوافق. أسلوب . لون الخلفية = 'أخضر' ؛يرفض. أسلوب . لون الخلفية = 'أحمر' ؛
يقبل. أسلوب . لون الخلفية = 'أصفر' ؛
كما ترى ، تم تصميم الأزرار بنجاح باستخدام ' أسلوب ' ملكية:
الطريقة الثانية: إضافة CSS مع JavaScript باستخدام طريقة “setAttribute ()”
لإضافة نمط CSS إلى JavaScript ، استخدم ' setAttribute () ' طريقة. يتم استخدامه لتعيين أو إضافة سمة وقيمتها إلى عنصر HTML.
بناء الجملة
يتم استخدام الصيغة التالية لـ ' setAttribute () ' طريقة:
مثال
هنا ، سنقوم بتعيين الأنماط المختلفة على الأزرار في JavaScript باستخدام ' setAttribute () ' طريقة. اضبط نصف قطر الحدود لجميع الأزرار على ' .5rem ولون نص ' يوافق ' و ' يرفض 'أزرار لـ' أبيض '.
يرفض. تعيين السمة ( 'أسلوب' و 'لون الخلفية: أحمر ؛ اللون: أبيض ؛ نصف قطر الحدود: .5rem ؛' ) ؛
يقبل. تعيين السمة ( 'أسلوب' و 'لون الخلفية: أصفر ؛ نصف قطر الحد: .5rem ؛' ) ؛
انتاج |
الطريقة الثالثة: إضافة CSS مع JavaScript باستخدام طريقة 'createElement ()'
إذا كنت ترغب في إنشاء فئات أو معرفات في نمط جافا سكريبت كما هو الحال في نمط CSS ، فاستخدم ' createElement () ' طريقة. يتم استخدامه لإنشاء عنصر جديد ديناميكيًا. للتصميم ، قم بإنشاء ' أسلوب 'باستخدام هذه الطريقة. ال ' إنشاء عنصر ('أسلوب') 'في JavaScript لإنشاء عنصر نمط جديد ديناميكيًا ، والذي يمكن استخدامه لإضافة أنماط CSS إلى صفحة ويب.
بناء الجملة
يتم استخدام بناء الجملة المحدد لـ ' createElement () ' طريقة:
لإضافة نمط CSS في JavaScript ، استخدم الصيغة المحددة:
مقدار ثابت أسلوب = وثيقة. خلق العنصر ( 'أسلوب' ) ؛ثم قم بإلحاق عنصر النمط في علامة الرأس باستخدام الصيغة أدناه:
وثيقة. رأس . إلحاق الطفل ( أسلوب ) ؛هنا، ' أسلوب 'هو إشارة إلى عنصر النمط الذي تم إنشاؤه حديثًا ، و' المستند 'هو العنصر الرئيسي لمستند HTML.
مثال
أولاً ، أنشئ عنصر نمط باستخدام ' createElement () ' طريقة:
الآن ، قم بإنشاء ' BTN 'فئة لتطبيق نفس النمط على جميع الأزرار والمعرفات' BTN1 '،' btn2 ' و ' BTN3 'لتصميم الأزرار الفردية:
أسلوب. داخلي HTML = '. BTN {
الخط - مقاس : 1.1rem ؛
حشوة : 3 بكسل ؛
هامِش : 2 بكسل ؛
الخط - عائلة : بدون - الرقيق ؛
حدود - نصف القطر : .5rem ؛
}
# btn1 {
خلفية - لون : أخضر ؛
لون : أبيض ؛
}
#btn2 {
خلفية - لون : أحمر ؛
لون : أبيض ؛
}
# btn3 {
خلفية - لون : أصفر ؛
}
' ؛
الآن ، قم بإلحاق عنصر النمط برأس المستند عن طريق تمرير كمعامل إلى ' إلحاق الطفل() ' طريقة:
وثيقة. رأس . إلحاق الطفل ( أسلوب ) ؛ انتاج |
هذا كل شيء عن إضافة CSS في جافا سكريبت.
خاتمة
لإضافة CSS باستخدام JavaScript ، استخدم التصميم المضمن بما في ذلك ' أسلوب 'الملكية ، و' setAttribute () '، أو التصميم العام باستخدام' createElement () ' طريقة. يعد التصميم العام أكثر كفاءة بينما لا يوصى باستخدام طريقة مضمنة لأنها تجعل من الصعب الحفاظ على أنماط التطبيق ويمكن أن تؤدي إلى تكرار الكود. وصفت هذه المقالة طرق إضافة CSS باستخدام JavaScript.