JavaScript

Class Elements

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

التاريخ

13 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

737

المواضيع

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
Add
document.getElementById("myDIV").classList.add("mystyle");
Remove
document.getElementById("myDIV").classList.remove("mystyle");
Toggle
document.getElementById("myDIV").classList.toggle("newClassName");
length
var x = document.getElementById("myDIV").classList.length;
contains
var x = document.getElementById("myDIV").classList.contains("mystyle");

</> className

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

return syntax

HTMLElementObject.className
Example
var x = document.getElementsByTagName("DIV")[0].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 = "";
  }
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.