انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 52
دورة جافا سكريبت

تعديل وإضافة style علي عناصر HTML في لغة جافا سكريبتJavaScript DOM CSS

ستتعلم في هذا الدرس كيفية عمل إضافة والتعديل علي style  أي عنصر داخل صفحة HTML باستخدام  لغة JavaScript والتعامل مع شجرة DOM.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,751
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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.

HTML 
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 لاحظ عدد السطور.

HTML 
<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.

HTML 
<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 لاحظ عدد السطور.

HTML 
<script>
let text = document.getElementById("text");
text.classList.add("primary");
</script>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…