إتقان معالجة فئات CSS باستخدام JavaScript

تعدّ أنماط صفحات الويب الديناميكية أمرًا بالغ الأهمية لإنشاء تجارب مستخدم جذابة. توفر جافا سكريبت أدوات قوية للتحكم في فئات CSS، مما يسمح بعناصر تفاعلية وتصميمات متجاوبة. تتناول هذه المقالة أكثر الطرق كفاءة لتعديل فئات CSS في جافا سكريبت.

محتويات

• classList.add()
• classList.remove()
• classList.toggle()
• خاصية className (أقل توصية)
• مثال عملي: زر تبديل

إضافة فئات CSS باستخدام classList.add()

تضيف طريقة classList.add() بشكل أنيق فئة جديدة إلى عنصر. إذا كانت الفئة موجودة بالفعل، يتم تجاهلها، مما يمنع الازدواجيات. وهذا يضمن إدارة فئات نظيفة وقابلة للتنبؤ.

const myElement = document.getElementById("myElement");
myElement.classList.add("newClass"); 

يقوم هذا المقطع بإضافة “newClass” إلى العنصر الذي يحمل معرف “myElement”. إذا كان “myElement” يحتوي بالفعل على الفئات “existingClass1 existingClass2″، فتصبح “existingClass1 existingClass2 newClass”.

إزالة فئات CSS باستخدام classList.remove()

تقوم classList.remove() بكفاءة بإزالة فئة محددة من عنصر. إذا كانت الفئة غير موجودة، فإن الطريقة لا تفعل شيئًا بصمت، مما يتجنب الأخطاء.

const myElement = document.getElementById("myElement");
myElement.classList.remove("existingClass");

هذا يزيل “existingClass” من “myElement”.

تبديل فئات CSS باستخدام classList.toggle()

توفر classList.toggle() طريقة موجزة لإضافة أو إزالة فئة بناءً على وجودها الحالي. هذا مثالي للسيناريوهات مثل إظهار/إخفاء العناصر أو التبديل بين الحالات.

const myElement = document.getElementById("myElement");
myElement.classList.toggle("active");

هذا يضيف “active” إذا كانت مفقودة ويزيلها إذا كانت موجودة.

التحكم المباشر في خاصية className

على الرغم من إمكانية التحكم المباشر في خاصية className (مثل: myElement.className = "newClass";)، إلا أنه يُنصح عمومًا بتجنب ذلك. هذا النهج يستبدل قائمة الفئات بأكملها، مما قد يؤدي إلى الكتابة فوق فئات أخرى مهمة. كما أنه يفتقر إلى التحكم الدقيق الذي تقدمه طرق classList.

مثال عملي: زر تبديل

لننشئ زرًا يغير مظهره في كل نقرة:

<button id="myButton">اضغط علي</button>

<style>
  .active {
    background-color: green;
    color: white;
  }
</style>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    button.classList.toggle("active");
  });
</script>

هذه الكود يضيف مُستمع حدث. كل نقرة تقوم بتبديل فئة “active”، مما يغير أسلوب الزر.

من خلال إتقان classList.add() و classList.remove() و classList.toggle()، يمكنك إدارة فئات CSS بكفاءة في جافا سكريبت، مما يخلق تطبيقات ويب ديناميكية وتفاعلية. تجنب التحكم المباشر في className إلا إذا كان ذلك ضروريًا تمامًا للحالات البسيطة.