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 = "";
}
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
