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

Mia Chevalier

الخميس، ٢٧ يونيو ٢٠٢٤ ١:٤٢:١٦ م

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

يأمر وصف

className يقوم بتعيين أو إرجاع سمة الفئة لعنصر ما. يستخدم لتغيير فئة العنصر.

getElementById إرجاع العنصر الذي يحتوي على سمة المعرف بالقيمة المحددة. يستخدم لتحديد عنصر الزر.

onclick يضبط الوظيفة التي سيتم تنفيذها عند حدوث حدث النقر على العنصر.

removeClass إزالة اسم فئة واحد أو أكثر من العناصر المحددة في jQuery.

addClass إضافة اسم فئة واحد أو أكثر إلى العناصر المحددة في jQuery.

$ الاسم المستعار لـ jQuery، يُستخدم لتحديد العناصر وتنفيذ الإجراءات عليها.

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

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

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

يوضح البرنامج النصي الثاني نفس الوظيفة باستخدام jQuery، وهي مكتبة JavaScript شائعة تعمل على تبسيط عملية اجتياز مستندات HTML ومعالجتها. هنا الاسم المستعار لـ jQuery يستخدم لتحديد عنصر الزر. ال يتم بعد ذلك تطبيق الطريقة لإعداد معالج حدث لحدث النقر. ضمن هذا المعالج، يتم تعديل فئة الزر باستخدام jQuery و 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 تقنيات أكثر تقدمًا لمعالجة قائمة فئات العناصر. إحدى هذه الطرق هي الخاصية، والتي توفر طريقة أكثر مرونة وقوة للعمل مع الفصول الدراسية. ال تقوم الخاصية بإرجاع مجموعة DOMTokenList المباشرة لسمات فئة العنصر. استخدام ، يمكنك إضافة الفئات وإزالتها وتبديلها والتحقق منها دون التأثير على الفئات الأخرى التي قد يتم تطبيقها على العنصر.

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

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

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

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

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

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

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

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

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

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