jQuery - الحصول على فئات CSS وتعيينها


باستخدام jQuery ، من السهل التعامل مع نمط العناصر.


jQuery معالجة CSS

يحتوي jQuery على عدة طرق لمعالجة CSS. سننظر في الطرق التالية:

  • addClass()- يضيف فئة واحدة أو أكثر إلى العناصر المختارة
  • removeClass()- يزيل فئة واحدة أو أكثر من العناصر المحددة
  • toggleClass()- للتبديل بين إضافة / إزالة الفئات من العناصر المختارة
  • css()- يعين أو يعيد سمة النمط

مثال على ورقة الأنماط

سيتم استخدام ورقة الأنماط التالية لجميع الأمثلة الموجودة في هذه الصفحة:

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

أسلوب jQuery addClass ()

يوضح المثال التالي كيفية إضافة سمات فئة إلى عناصر مختلفة. بالطبع يمكنك تحديد عدة عناصر عند إضافة الفئات:

مثال

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});

يمكنك أيضًا تحديد فئات متعددة داخل addClass()الطريقة:

مثال

$("button").click(function(){
  $("#div1").addClass("important blue");
});


طريقة jQuery removeClass ()

يوضح المثال التالي كيفية إزالة سمة فئة معينة من عناصر مختلفة:

مثال

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

طريقة jQuery toggleClass ()

سيوضح المثال التالي كيفية استخدام toggleClass()طريقة jQuery. تقوم هذه الطريقة بالتبديل بين إضافة / إزالة الفئات من العناصر المحددة:

مثال

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

أسلوب jQuery css ()

css()سيتم شرح طريقة jQuery في الفصل التالي.


تمارين مسج

اختبر نفسك مع التمارين

ممارسه الرياضه:

استخدم طريقة jQuery لإضافة فئة "مهمة" إلى عنصر <p>.

$("p").("");


مرجع jQuery CSS

للحصول على نظرة عامة كاملة على جميع طرق jQuery CSS ، يرجى الانتقال إلى مرجع jQuery HTML / CSS الخاص بنا .