![JavaScript JavaScript](https://www.closetag.com/images/materials/1607319472_4453.png)
Class Elements
في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تمكننا من التعامل والتلاعب بخاصية class
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Class Elements chevron_left JavaScript
Class Elements
</> 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
element.classList
contains
var x = document.getElementById("myDIV").classList.contains("mystyle");
</> className
- className : هي عبارة عن خاصية تستخدم في معرفة اسم class تم تعيينه لعنصر معين
- تستخدم خاصية className ايضا في اضافة class جديد لعنصر معين
Syntax
return syntax
HTMLElementObject.className
<div id="myDIV" class="mystyle test example">I am a DIV element</div> var x = document.getElementById("myDIV").className;
Syntax
set syntax
HTMLElementObject.className = class
Example
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 50) { document.getElementById("myP").className = "test"; } else { document.getElementById("myP").className = ""; } }
لديك استفسار ؟
يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.