كيفية تغيير فئة عنصر HTML باستخدام جافا سكريبت

Temp mail SuperHeros
كيفية تغيير فئة عنصر HTML باستخدام جافا سكريبت
كيفية تغيير فئة عنصر HTML باستخدام جافا سكريبت
Mia Chevalier
الخميس، ٢٧ يونيو ٢٠٢٤ ١:٤٢:١٦ م

تحديث الفئات باستخدام جافا سكريبت

توفر JavaScript أدوات قوية للتفاعل ديناميكيًا مع عناصر HTML ومعالجتها. إحدى المهام الشائعة هي تغيير فئة عنصر HTML استجابةً لأحداث مثل onclick.

سيوضح هذا الدليل كيفية استخدام JavaScript لتغيير فئة العنصر، مما يسمح بتغييرات التصميم والسلوك الديناميكي على صفحات الويب الخاصة بك. سواء كنت تستجيب لنقرة زر أو لحدث آخر، فإن هذه التقنيات ستعزز مهاراتك في تطوير الويب.

يأمر وصف
className يقوم بتعيين أو إرجاع سمة الفئة لعنصر ما. يستخدم لتغيير فئة العنصر.
getElementById إرجاع العنصر الذي يحتوي على سمة المعرف بالقيمة المحددة. يستخدم لتحديد عنصر الزر.
onclick يضبط الوظيفة التي سيتم تنفيذها عند حدوث حدث النقر على العنصر.
removeClass إزالة اسم فئة واحد أو أكثر من العناصر المحددة في jQuery.
addClass إضافة اسم فئة واحد أو أكثر إلى العناصر المحددة في jQuery.
$ الاسم المستعار لـ jQuery، يُستخدم لتحديد العناصر وتنفيذ الإجراءات عليها.

فهم معالجة فئة جافا سكريبت

توضح البرامج النصية المقدمة كيفية تغيير فئة عنصر HTML باستخدام JavaScript وjQuery استجابةً لحدث النقر. في البرنامج النصي الأول، يتم استخدام JavaScript عادي لتحقيق هذه الوظيفة. ال getElementById يتم استخدام الطريقة لتحديد عنصر الزر بالمعرف "myButton". ال onclick ثم يتم تعيين الحدث لهذا العنصر، مع تحديد الوظيفة التي سيتم تنفيذها عند النقر فوق الزر. داخل هذه الوظيفة، الزر className تم تعيين الخاصية على "تم التغيير"، مما يؤدي إلى تغيير فئتها وبالتالي نمطها كما هو محدد في CSS. يعرض هذا البرنامج النصي بشكل فعال بساطة ومباشرة استخدام JavaScript العادي لمعالجة DOM.

يوضح البرنامج النصي الثاني نفس الوظيفة باستخدام jQuery، وهي مكتبة JavaScript شائعة تعمل على تبسيط عملية اجتياز مستندات HTML ومعالجتها. هنا الاسم المستعار لـ jQuery $ يستخدم لتحديد عنصر الزر. ال click يتم بعد ذلك تطبيق الطريقة لإعداد معالج حدث لحدث النقر. ضمن هذا المعالج، يتم تعديل فئة الزر باستخدام jQuery removeClass و addClass طُرق. توفر هذه الأساليب طريقة ملائمة للتعامل مع فئات العناصر، مما يوفر أسلوبًا أكثر قابلية للقراءة وإيجازًا مقارنة بجافا سكريبت العادي. يهدف كلا البرنامجين إلى توضيح كيف يمكن للأدوات المختلفة تحقيق نفس الهدف المتمثل في تغيير فئة العنصر ديناميكيًا بناءً على تفاعل المستخدم.

تغيير فئة العنصر عند النقر باستخدام JavaScript

جافا سكريبت وHTML

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class Example</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script>
  document.getElementById('myButton').onclick = function() {
    this.className = 'changed';
  };
</script>
</body>
</html>

تحديث فئة عنصر HTML باستخدام jQuery

جافا سكريبت مع مسج

// HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Class with jQuery</title>
<style>
  .original { color: blue; }
  .changed { color: red; }
</style>
</head>
<body>
<button id="myButton" class="original">Click me</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#myButton').click(function() {
    $(this).removeClass('original').addClass('changed');
  });
</script>
</body>
</html>

تقنيات متقدمة لمعالجة الفصل في جافا سكريبت

بالإضافة إلى التغييرات الأساسية في الفئات استجابةً للأحداث، تقدم JavaScript تقنيات أكثر تقدمًا لمعالجة قائمة فئات العناصر. إحدى هذه الطرق هي classList الخاصية، والتي توفر طريقة أكثر مرونة وقوة للعمل مع الفصول الدراسية. ال classList تقوم الخاصية بإرجاع مجموعة DOMTokenList المباشرة لسمات فئة العنصر. استخدام classList، يمكنك إضافة الفئات وإزالتها وتبديلها والتحقق منها دون التأثير على الفئات الأخرى التي قد يتم تطبيقها على العنصر.

على سبيل المثال، add يمكن استخدام الطريقة لإضافة فئة واحدة أو أكثر إلى عنصر ما، في حين أن remove يمكن للطريقة إزالة فئة محددة أو أكثر. ال toggle تعد هذه الطريقة مفيدة بشكل خاص لأنها تضيف الفصل إذا لم يكن موجودًا وتزيله إذا كان موجودًا، مما يجعله مثاليًا لمهام مثل تنفيذ تبديل الوضع المظلم. بالإضافة إلى ذلك، contains تتحقق الطريقة مما إذا كان العنصر يحتوي على فئة معينة، والتي يمكن أن تكون مفيدة للتطبيق المشروط للأنماط أو السلوكيات بناءً على الحالة الحالية للعنصر.

الأسئلة المتداولة حول معالجة فئة JavaScript

  1. كيف يمكنني إضافة فئات متعددة إلى عنصر؟
  2. استخدم ال classList.add الطريقة مع وسائط متعددة: element.classList.add('class1', 'class2').
  3. هل يمكنني إزالة جميع الفئات من عنصر ما؟
  4. نعم يمكنك استخدام className الخاصية وقم بتعيينها على سلسلة فارغة: element.className = ''.
  5. ماهو الفرق بين className و classList؟
  6. className يحدد أو يحصل على سمة الفئة بأكملها، في حين أن classList يسمح بمعالجة أكثر تفصيلاً للفئات.
  7. كيف يمكنني التحقق مما إذا كان العنصر يحتوي على فئة معينة؟
  8. استخدم ال classList.contains طريقة: element.classList.contains('classname').
  9. كيف يمكنني تبديل فئة على عنصر؟
  10. استخدم ال classList.toggle طريقة: element.classList.toggle('classname').
  11. هل يمكنني استخدام jQuery لمعالجة الفئات؟
  12. نعم، يوفر jQuery أساليب مثل addClass, removeClass، و toggleClass.
  13. ما هي قائمة DOMTokenList المباشرة؟
  14. أ DOMTokenList عبارة عن مجموعة مباشرة يتم تحديثها تلقائيًا عندما تتغير سمة الفئة الخاصة بالعنصر.
  15. يكون classList مدعومة في جميع المتصفحات؟
  16. classList يتم دعمه في جميع المتصفحات الحديثة، ولكن الإصدارات الأقدم من Internet Explorer قد لا تدعمه بشكل كامل.
  17. كيف يمكنني إضافة فئات ديناميكيًا بناءً على الشروط؟
  18. يمكنك استخدام if تصريحات في تركيبة مع classList.add أو classList.remove لتطبيق الطبقات بشكل مشروط.

التقنيات الأساسية لتغييرات الفئة الديناميكية

توضح البرامج النصية المقدمة كيفية تغيير فئة عنصر HTML باستخدام JavaScript وjQuery استجابةً لحدث النقر. في البرنامج النصي الأول، يتم استخدام JavaScript عادي لتحقيق هذه الوظيفة. ال getElementById يتم استخدام الطريقة لتحديد عنصر الزر بالمعرف "myButton". ال onclick ثم يتم تعيين الحدث لهذا العنصر، مع تحديد الوظيفة التي سيتم تنفيذها عند النقر فوق الزر. داخل هذه الوظيفة، الزر className تم تعيين الخاصية على "تم التغيير"، مما يؤدي إلى تغيير فئتها وبالتالي نمطها كما هو محدد في CSS. يعرض هذا البرنامج النصي بشكل فعال بساطة ومباشرة استخدام JavaScript العادي لمعالجة DOM.

يوضح البرنامج النصي الثاني نفس الوظيفة باستخدام jQuery، وهي مكتبة JavaScript شائعة تعمل على تبسيط عملية اجتياز مستندات HTML ومعالجتها. هنا الاسم المستعار لـ jQuery $ يستخدم لتحديد عنصر الزر. ال click يتم بعد ذلك تطبيق الطريقة لإعداد معالج حدث لحدث النقر. ضمن هذا المعالج، يتم تعديل فئة الزر باستخدام jQuery removeClass و addClass طُرق. توفر هذه الأساليب طريقة ملائمة للتعامل مع فئات العناصر، مما يوفر أسلوبًا أكثر قابلية للقراءة وإيجازًا مقارنة بجافا سكريبت العادي. يهدف كلا البرنامجين إلى توضيح كيف يمكن للأدوات المختلفة تحقيق نفس الهدف المتمثل في تغيير فئة العنصر ديناميكيًا بناءً على تفاعل المستخدم.

تلخيص النقاط الرئيسية

توفر معالجة فئة عنصر HTML باستخدام JavaScript أو jQuery طريقة مباشرة لتحديث نمط العنصر وسلوكه ديناميكيًا. من خلال فهم واستخدام أساليب مثل className, classList، وأساليب معالجة الفئات في jQuery، يمكن للمطورين تحسين التفاعل والاستجابة لصفحات الويب الخاصة بهم، مما يجعلها أكثر جاذبية للمستخدمين.