عملیات CSS jQuery - روش css()

دستورالعمل CSS عمل jQuery

مثال

تنظیم رنگ عنصر <p>:

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

آزمایش کنید

تعریف و استفاده

روش css() مقدار یک یا چند ویژگی استایل برای عنصر تطابق یافته را تنظیم یا بازمی‌گرداند.

مقدار ویژگی CSS بازمی‌گرداند

مقدار ویژگی CSS برای اولین عنصر تطابق یافته بازمی‌گرداند.

نکته:وقتی از آن برای بازگرداندن یک مقدار استفاده می‌شود، ویژگی‌های CSS کوتاه شده (مثل "background" و "border") پشتیبانی نمی‌شوند.

$(selector).css(name)
پارامتر توضیح
name ضروری است. نام ویژگی‌های CSS را مشخص می‌کند. این پارامتر می‌تواند شامل هرگونه ویژگی CSS باشد. به عنوان مثال "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 - اختیاری. موقعیت 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