jQuery CSS Operations - css() Method

دليل التشغيل CSS لـ jQuery

مثال

إعداد لون عنصر <p>:

$(".btn1").click(function(){
  $("p").css("color","red");
});

تجربة بنفسك

التعريف والاستخدام

يستخدم css() لتحديد أو تعيين نمط واحد أو أكثر من العناصر التي تتطابق معها.

يعود إلى قيمة خاصية CSS

يعود إلى قيمة خاصية CSS للعنصر الأول الذي يتطابق.

التعليقات:لا يدعم css() الخاصية المختصرة عند استخدامه لتحويل القيمة (مثل "background" و "border").

$(selector).css(name)
معاملات وصف
name مطلوب. تحديد اسم خاصية CSS. يمكن أن يحتوي هذا المعامل على أي خاصية CSS. مثل "color".

مثال

الحصول على قيمة خاصية النمط color للفقرة الأولى:

$("p").css("color");

تجربة بنفسك

إعداد خصائص CSS

إعداد الخاصية CSS المحددة لجميع العناصر التي تتطابق معها.

$(selector).css(name,value)
معاملات وصف
name مطلوب. يحدد اسم الخاصية CSS. يمكن أن يحتوي هذا المعامل على أي خاصية CSS، مثل "color".
value

اختياري. يحدد قيمة الخاصية CSS. يمكن أن يحتوي هذا المعامل على أي قيمة الخاصية CSS، مثل "red".

إذا تم تعيين قيمة فارغة، يتم حذف الخاصية المحددة من العنصر.

مثال

جعل لون جميع الفقرات أحمر:

$("p").css("color","red");

تجربة بنفسك

إعداد الخاصية CSS باستخدام وظيفة

إعداد قيمة الخاصية النمط لجميع العناصر التي تتطابق معها.

هذا الدالة تعود القيمة التي يتم تعيينها للخصائص. تقبلان معاملين، index هو موقع العنصر في مجموعة العناصر، value هو القيمة السابقة للخصائص.

$(selector).css(name,function(index,value))
معاملات وصف
name مطلوب. يحدد اسم الخاصية CSS. يمكن أن يحتوي هذا المعامل على أي خاصية CSS، مثل "color".
function(index,value)

يحدد وظيفة عودة القيمة الجديدة للخاصية CSS.

  • index - اختياري. يقبل موقع اختصار المسافر
  • oldvalue - اختياري. يقبل القيمة الحالية للخاصية CSS.

مثال 1

جعل لون جميع الفقرات أحمر:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

تجربة بنفسك

مثال 2

زيادة عرض div تدريجياً:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

تجربة بنفسك

إعداد عدة خصائص CSS/قيم

$(selector).css({property:value, property:value, ...})

تعيين "مجموعة اسم/قيمة" كخصائص النمط لجميع العناصر التي تتطابق معها.

هذه هي أفضل طريقة لتحديد عدد كبير من خصائص النمط على جميع العناصر التي تتطابق معها.

معاملات وصف
{property:value}

مطلوب. يحدد اسم الخاصية/قيمة للنمط الذي يتم تعيينه.

هذا المعامل يمكن أن يحتوي على عدة أزواج من اسم الخاصية/قيمة CSS. مثل {"color":"red","font-weight":"bold"}

مثال

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

تجربة بنفسك

دليل التشغيل CSS لـ jQuery