Class Elements
في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تمكننا من التعامل والتلاعب بخاصية class
التاريخ
13 نوفمبر 2021
الدروس
146
المستوى
العامة
اللغة
انجليزي
المشاهدات
1027
المواضيع
24
الشروحات 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 = ""; } }