jQuery CSS संचालन - css() विधि

jQuery CSS عمل عملیات مرجع

مثال

<p> एलीमेंट का रंग सेट करें:

$(".btn1").click(function(){
  $("p").css("रंग","लाल");
});

مخصوصاً امتحان کنید

व्याख्या और उपयोग

css() विधि में मेल मिलने वाले एलीमेंट के एक या अधिक शैली विशेषताओं को लौटाता या सेट करता है。

CSS विशेषता का मान लौटाता है

पहले मेल होने वाले एलीमेंट की CSS विशेषता का मान लौटाता है।

टिप्पणी:जब एक मान लौटाने के लिए इस्तेमाल किया जाता है तो लघुरूपी CSS विशेषताएँ (जैसे "बैकग्राउंड" और "बॉर्डर") नहीं समर्थित हैं।

$(selector).css(name)
پارامتر توضیح
name आवश्यकता।CSS विशेषता के नाम निर्धारित करता है।इस पारामीटर में कोई भी CSS विशेषता शामिल की जा सकती है।जैसे "रंग"।

مثال

पहले अनुच्छेद के रंग शैली विशेषता के मान को प्राप्त करें:

$("p").css("रंग");

مخصوصاً امتحان کنید

सेट 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 - اختیاری. مقدار position 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"
  });

مخصوصاً امتحان کنید

jQuery CSS عمل عملیات مرجع