JavaScript

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 في لغة جافا سكريبت

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات