JavaScript DOM CSS
تعديل وإضافة style علي عناصر HTML في لغة جافا سكريبت
ستتعلم في هذا الدرس كيفية عمل إضافة والتعديل علي style أي عنصر داخل صفحة HTML باستخدام لغة JavaScript والتعامل مع شجرة DOM.
التاريخ
12 نوفمبر 2021
الدروس
146
المستوى
العامة
اللغة
انجليزي
المشاهدات
2304
المواضيع
24
الشروحات chevron_left JavaScript DOM CSS chevron_left JavaScript
JavaScript DOM CSS
تعديل وإضافة style علي عناصر HTML في لغة جافا سكريبت
</>
JavaScript DOM CSS
تعديل وإضافة style علي عناصر HTML في لغة جافا سكريبت
يمكن في لغة JavaScript إضافة وتعديل style الخاص بعنصر أو أكثر من عناصر شجرة DOM أو عناصر HTML.
إضافة CSS Style علي العناصر بلغة JavaScript بطريقتين:
- style object هو كائن مسئول عن تغيير خاصية من خصائص CSS بلغة JavaScript.
- classList object هو كائن مسئول عن إضافة كلاس مجهز مسبقاً في ملف CSS.
JavaScript Style Object Syntax
طريقة إضافة كائن style لتغيير خاصية من خصائص CSS بلغة JavaScript.
element.style.property = value;
JavaScript classList Object Syntax
طريقة إضافة كائن classList لإضافة كلاس CSS بلغة JavaScript.
element.classList.add(cassName);
هام
تعد طريقة استخدام كائن classList في لغة JavaScript هي الطريقة المفضلة والشائعة لأن طريقة إضافة كائن style تتطلب لكل خاصية CSS سطر جديد والتكلفة هي سطور برمجية كثيرة.
</>
JavaScript CSS style object
كائن style لإضافة خصائص CSS في لغة JavaScript
خطوات كتابة كائن CSS style في لغة JavaScript:
- تحديد العنصر المراد تغيير أو إضافة خصائص CSS علية عن طريق getElementById.
- حفظ العنصر في متغير وليكن text.
- يتبع إسم المتغير كائن style.
- يتبع كائن style إسم الخاصية بطريقة camel case بدلاً من background-color تكتب backgroundColor.
- يتبع الخاصية علامة equal = ثم القيمة بين علامات تنصيص بهذا الشكل "10px" إذا كانت ليست متغير.
JavaScript CSS style object
إضافة أكثر من خاصية علي عنصر text عن طريق كائن style لاحظ عدد السطور.
<script> let text = document.getElementById("text"); text.style.color = "white"; text.style.padding = "10px"; text.style.display = "inline-block"; text.style.backgroundColor = "#007bff"; </script>
Assign style values with variables in JavaScript
تعيين قيم كائن style عن طريق المتغيرات في لغة JavaScript.
<script> let text = document.getElementById("text"); let padding = "10"; let display = "inline-block"; let color = "white"; let background = "#007bff"; text.style.display = display; text.style.padding = padding + "px"; text.style.color = color; text.style.backgroundColor = background; </script>
</>
JavaScript classList add object
كائن classList لإضافة كلاس CSS في لغة JavaScript
خطوات كتابة كائن CSS style في لغة JavaScript:
- تحديد العنصر المراد تغيير أو إضافة خصائص CSS علية عن طريق getElementById.
- حفظ العنصر في متغير وليكن text.
- يتبع إسم المتغير كائن style.
- يتبع كائن style إسم الخاصية بطريقة camel case بدلاً من background-color تكتب backgroundColor.
- يتبع الخاصية علامة equal = ثم القيمة بين علامات تنصيص بهذا الشكل "10px" إذا كانت ليست متغير.
JavaScript classList add object
إضافة أكثر من خاصية علي عنصر text عن طريق كائن style لاحظ عدد السطور.
<script> let text = document.getElementById("text"); text.classList.add("primary"); </script>