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

Class Elements

في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تمكننا من التعامل والتلاعب بخاصية class

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

classList



  • classList هي خاصية من خواص الDOM في لغة جافا سكريبت تسمح لنا بالتحكم في خصائص ال CSS لعنصر معين.
  • JavaScript classList هي خاصية للقراءة فقط تقوم بأرجاع أسماء CSS classes 
  • خاصية classList هي مفيدة في مجموعة من الحالات مثل (add, remove , toggle ) لخصائص ال CSS لعنصر معين
  • ترجع الخاصية className اسم classes في شكل نصوص، بينما ترجع خاصية classList في JavaScript اسم الفئات في شكل مصفوفة.  
Property / Method Description
length

تستخدم في ارجاع عدد ال classes لعنصر معين
add(class1, class2, ...)

تستخدم في اضافة واحد او مجموعة من ال

classes لعنصر معين

في حالة قمت بأضافة class معين تمت اضافته مسبقا فسوف يتم تجاهله ولن يتم اضافته 
contains(class)

تقوم بأرجاع قيمة boolean تدل علي وجود عنصر معين او لا 

true : تدل علي أن العنصر يحتوي علي class بأسم معين 

false : تدل علي ان العنصر لا يحتوي علي class بأسم معين
remove(class1, class2, ...)

تستخدم في حذف class معين من العنصر 

في حالة انك قمت بتحديد عنصر غير موجود ليتم حذفه فلن يحدث ذلك خطأ وسوف يتم تجاهله
item(index)

تستخدم في الوصول الي class معين عن طريق الفهرس index الخاص به  كما ان اول class يبدا ال index الخاص به ب 0 



Syntax

HTML 
element.classList

Add

HTML 
document.getElementById("myDIV").classList.add("mystyle");
جرّب بنفسك

Remove

HTML 
document.getElementById("myDIV").classList.remove("mystyle");
جرّب بنفسك

Toggle

HTML 
document.getElementById("myDIV").classList.toggle("newClassName");
جرّب بنفسك

length

HTML 
var x = document.getElementById("myDIV").classList.length;
جرّب بنفسك

contains

HTML 
var x = document.getElementById("myDIV").classList.contains("mystyle");
جرّب بنفسك

className

  • className : هي عبارة عن خاصية تستخدم في معرفة اسم class تم تعيينه لعنصر معين 
  • تستخدم خاصية className ايضا في اضافة class جديد لعنصر معين 

Syntax

return syntax

HTML 
HTMLElementObject.className

Example

HTML 
var x = document.getElementsByTagName("DIV")[0].className;
جرّب بنفسك
HTML 
<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;
جرّب بنفسك

Syntax

set syntax

HTML 
HTMLElementObject.className = class

Example

HTML 
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
جرّب بنفسك

مشاركة

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

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