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

من خلال jQuery، يمكننا بسهولة التعامل مع العناصر CSS.

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()

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

مثال

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

جربها بنفسك

دالة jQuery css()

سنشرح في الفصل القادم كيفية استخدام دالة jQuery css()

دليل مرجع jQuery HTML

للحصول على محتوى كامل لأساليب jQuery CSS، يرجى زيارة دليل مرجع jQuery CSS