JavaScript DOM CSS
تعديل وإضافة style علي عناصر HTML في لغة جافا سكريبت
ستتعلم في هذا الدرس كيفية عمل إضافة والتعديل علي style أي عنصر داخل صفحة HTML باستخدام لغة JavaScript والتعامل مع شجرة DOM.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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);
هام
</>
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
