جافاسكربتتعديل تصميم العناصر
- تعديل تصميم العنصر في جافاسكربت
- تعديل تصميم العنصر بشكل مباشر
- إضافة / حذف كلاس CSS من العنصر
- معرفة ما إن كان العنصر يستخدم كلاس ما
- تبديل قيمة
class
بقيمة أخرى - معرفة خصائص التصميم التي إعتمدها المتصفح
تعديل تصميم العنصر في جافاسكربت
الكائن document يوفر العديد من الطرق التي يمكن من خلالها تعديل تصميم العناصر، سواء بتمرير خصائص CSS بشكل مباشر لها أو من خلال إعطاء العناصر كلاسات CSS فيها خصائص التصميم التي نريد تطبيقها عليها.
في هذا الدرس ستتعلم كل الطرق التي يمكنك من خلالها تعديل تصميم العناصر بواسطة جافاسكربت.
تعديل تصميم العنصر بشكل مباشر
يمكنك استخدام الخاصية style.propertyName لإعطاء العنصر أي خاصية CSS مع القيمة التي تريد إضافتها له بشكل مباشر.
مكان الكلمة propertyName نمرر إسم الخاصية التي نريد إضافتها للعنصر بأسلوب Camel Case.
كتابة أسماء خصائص CSS بأسلوب Camel Case يكون بإزالة أي رمز -
موجود في الإسم و بدء الكلمة الموجودة بعده بحرف كبير على النحو التالي:
- display نكتبها style.display
- margin-top نكتبها style.marginTop
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo
و من بعدها قمنا بتغيير بعض خصائصه.
مثال
الأسلوب السابق، يمرر خصائص CSS بشكل مباشر للعنصر كما يلي و يمكنك رؤية هذا الأمر على الحاسوب إذا قمت بالإقتراب من العنصر ثم نقرت بزر الفأرة الأيمن و اخترت Inspect أو Inspect Element.
<p id="demo" style="color: blue; font-family: Arial; font-weight: bold;">My style is changed.</p>
إضافة / حذف كلاس CSS من العنصر
يمكنك استخدام الخاصية classList و من ثم استدعاء إحدى التالية منها للتعامل مع كلاسات العنصر:
- classList.add() لإضافة كلاس جديد في العنصر.
- classList.remove() لحذف كلاس موجود في العنصر.
- classList.toggle() لإضافة كلاس في العنصر إن لم يكن موجوداً فيه و لحذفه منه إن كان كذلك.
بغض النظر عن الدالة التي نستخدمها منهم، فإنه يجب تمرير إسم الكلاس كنص لهم.
الدالة classList.add() و الدالة classList.remove() يمكنك تمرير إسم أكثر من كلاس لهم في ذات الوقت و عندها سيتم إضافة أو حذف أكثر من كلاس من العنصر في ذات الوقت.
أمثلة حول إضافة كلاس
في المثال التالي قمنا بإضافة الكلاس highlight
للعنصر الذي يملك id يساوي demo
.
المثال الأول
في المثال التالي قمنا بإضافة الكلاس highlight
و الكلاس highlight-border
للعنصر الذي يملك id يساوي demo
.
المثال الثاني
أمثلة حول إزالة كلاس
في المثال التالي قمنا بإزالة الكلاس highlight
من العنصر الذي يملك id يساوي demo
.
المثال الأول
في المثال التالي قمنا بإزالة الكلاس highlight
و الكلاس highlight-border
من العنصر الذي يملك id يساوي demo
.
المثال الثاني
مثال حول تناوب الكلاس
في المثال التالي قمنا بجعل العنصر الذي يملك id يساوي demo
يتناوب على استخدم الكلاس highlight
، و هذا يعني أنه:
- في حال كان العنصر بالأساس يستخدم الكلاس فإنه سيتم إزالته منه.
- في حال كان العنصر بالأساس لا يستخدم الكلاس فإنه سيتم إضافته له.
مثال
معرفة ما إن كان العنصر يستخدم كلاس ما
يمكنك استخدام الدالة classList.contains() لمعرفة ما إن كان العنصر يستخدم كلاس محدد أم لا.
بين أقواس الدالة يجب تمرير إسم الكلاس المراد التأكد من وجوده أو عدمه كنص.
الدالة ترجع true إذا كان العنصر يحتوي على الكلاس، و ترجع false إن لم يكن كذلك.
في المثال التالي قمنا بفحص العنصر الذي يملك id يساوي demo
لمعرفة ما إن كان يستخدم الكلاس highlight
أم لا.
مثال
تبديل قيمة class
بقيمة أخرى
يمكنك استخدام الخاصية className لتغيير قيمة الخاصية class للعنصر كما هي أو للإضافة عليها.
ننصح باستخدام الدالتين classList.add() و classList.remove() لإضافة و حذف الكلاسات من العنصر بدلاً من استخدام الخاصية className لأن التعامل معهما أكثر سهولة و يجنبك حذف كلاسات من العنصر عن طريق الخطأ.
في المثال التالي قمنا بتبديل جميع الكلاسات التي يستخدمها العنصر الذي يملك id يساوي demo
بالكلاس danger
.
المثال الأول
في المثال التالي قمنا بإضافة الكلاس highlight-border
للعنصر الذي يملك id يساوي demo
.
المثال الثاني
معرفة خصائص التصميم التي إعتمدها المتصفح
الكائن window يتيح لك معرفة كافة خصائص القيم المطبقة على العنصر.
يمكنك استدعاء الدالة window.getComputedStyle() للحصول على كائن فيه جميع الخصائص CSS المطبقة على العنصر و من ثم يمكنك المرور عليهم واحدة تلو الأخرى بواسطة حلقة، أو تستطيع استخدام الدالة getPropertyValue() لمعرفة قيمة خصائص محددة مطبقة على العنصر.
في المثال التالي قمنا بعرض بعض خصائص و قيم CSS المطبقة على العنصر الذي يملك id يساوي demo
.
المثال الأول
في المثال التالي قمنا باستخدام حلقة لعرض جميع خصائص و قيم CSS المطبقة على العنصر الذي يملك id يساوي demo
.