متد css در جی کوئری

متد css در jQuery برای دسترسی به مقدار یک ویژگی CSS یا تغییر آن به کار می رود. با استفاده از آن می توانید ظاهر یک عنصر HTML را در زمان اجرا تنظیم کنید؛ برای نمونه، رنگ متن را تغییر دهید، اندازه نوشته را بخوانید یا چند ویژگی را با یک دستور به عنصر اختصاص دهید.

برای استفاده درست از این متد، لازم است تفاوت میان خواندن و نوشتن ویژگی ها، انتخاب عنصر مورد نظر و شیوه نوشتن نام ویژگی های CSS را بشناسید. پنج نکته زیر مهم ترین کاربردها و خطاهای رایج را با مثال توضیح می دهند.

وقتی متد css() را با یک نام ویژگی فراخوانی می کنید، jQuery مقدار محاسبه شده آن ویژگی را برای نخستین عنصر انتخاب شده برمی گرداند. در این حالت، متد فقط مقدار را می خواند و ظاهر صفحه را تغییر نمی دهد. مقدار بازگشتی معمولا یک رشته است؛ برای نمونه، مقدار رنگ ممکن است به شکل رنگ RGB برگردد، حتی اگر در فایل CSS با نامی مانند red نوشته شده باشد.

شکل کلی خواندن ویژگی به این صورت است. در این مثال، انتخابگر عنصر را پیدا می کند و نام ویژگی داخل رشته قرار می گیرد:

$("selector").css("property");

برای نمونه، اگر بخواهید رنگ متن نخستین پاراگراف انتخاب شده را بخوانید، می توانید از کد زیر استفاده کنید. مقدار به دست آمده را می توان در متغیری ذخیره کرد، در کنسول دید یا در منطق دیگری از برنامه به کار برد:

var textColor = $("p").css("color");
console.log(textColor);

اگر صفحه چند پاراگراف داشته باشد، انتخابگر $("p") همه آنها را پیدا می کند، اما فراخوانی getter مقدار ویژگی را از نخستین پاراگراف می خواند. برای هدف گرفتن یک پاراگراف مشخص، از شناسه یا کلاس یکتای آن استفاده کنید؛ مثلا $("#intro") به عنصری با شناسه intro اشاره می کند.

برای تغییر یک ویژگی، نام ویژگی و مقدار تازه را به متد css() می دهید. در این حالت، متد مقدار جدید را روی عنصر یا عناصر انتخاب شده اعمال می کند و خود مجموعه انتخاب شده را برمی گرداند؛ به همین دلیل، می توانید فراخوانی های jQuery را در صورت نیاز به هم زنجیر کنید.

در مثال زیر، با کلیک روی دکمه، رنگ متن همه پاراگراف های صفحه قرمز می شود. این سناریو زمانی کاربرد دارد که بخواهید واکنشی دیداری به یک رویداد کاربر نشان دهید:

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

در این کد، click() رویداد کلیک را مدیریت می کند و دستور درون تابع پس از کلیک اجرا می شود. انتخابگر $("p") همه پاراگراف ها را هدف می گیرد؛ اگر فقط یک بخش باید تغییر کند، انتخابگر را محدودتر بنویسید. برای مثال، $("#message") تنها عنصر دارای شناسه message را انتخاب می کند.

مقدارهایی که به ویژگی های CSS می دهید باید با نوع ویژگی سازگار باشند. برای رنگ می توان از نام رنگ، مقدار هگز یا تابع رنگ استفاده کرد؛ برای ویژگی هایی مانند اندازه، معمولا واحدی مانند px یا em لازم است. در صورت حذف واحد از مقداری که به واحد نیاز دارد، ممکن است نتیجه مورد انتظار به دست نیاید.

اگر قرار است چند ویژگی CSS را هم زمان تغییر دهید، لازم نیست برای هرکدام یک فراخوانی جداگانه بنویسید. می توانید یک شیء جاوااسکریپت به متد بدهید که نام ویژگی ها و مقدارهای جدید را در خود دارد. این روش خوانایی کد را بهتر می کند و تغییرات مرتبط را در یک محل نگه می دارد.

نمونه زیر رنگ و اندازه متن را برای همه پاراگراف های انتخاب شده تنظیم می کند. هر ویژگی به صورت یک جفت نام و مقدار نوشته شده است:

$("p").css({
  "color": "navy",
  "font-size": "18px",
  "background-color": "#f2f2f2"
});

در نام گذاری ویژگی ها، jQuery هم نام های CSS دارای خط تیره مانند font-size را می پذیرد و هم در بسیاری از موارد از شیوه camelCase مانند fontSize پشتیبانی می کند. برای کاهش ابهام و نزدیک ماندن به نام های رایج در CSS، بهتر است در یک پروژه شیوه ای ثابت انتخاب کنید.

این روش برای تغییر چند ویژگی مرتبط در واکنش به یک رویداد مناسب است؛ اما اگر تغییرها بخشی از حالت های تکرارشونده رابط کاربری هستند، استفاده از کلاس CSS می تواند انتخاب بهتری باشد. در آن وضعیت، با افزودن یا حذف کلاس، ظاهر از فایل CSS مدیریت می شود و منطق جاوااسکریپت از جزئیات بصری جدا می ماند.

مقدار خوانده شده از متد css در jQuery فقط برای نمایش در کنسول نیست. می توانید آن را در یک شرط بررسی کنید، در متغیری نگه دارید یا برای تصمیم گیری درباره رفتار صفحه به کار ببرید. از آنجا که مقدار ویژگی CSS اغلب به صورت رشته برگردانده می شود، پیش از انجام محاسبات عددی باید نوع داده و واحد آن را در نظر بگیرید.

در مثال ساده زیر، رنگ متن یک عنوان خوانده می شود و در کنسول مرورگر نمایش داده می شود. این روش برای بررسی نتیجه کد هنگام توسعه و پیدا کردن اختلاف میان مقدار مورد انتظار و مقدار واقعی مفید است:

var headingColor = $("#title").css("color");
console.log(headingColor);

مقدار بازگشتی ممکن است با شکل نوشتاری که در فایل CSS دیده اید متفاوت باشد؛ مرورگر مقدار نهایی محاسبه شده را ارائه می کند. بنابراین، اگر رنگ را با نامی مانند navy تعریف کرده باشید، مقدار خوانده شده ممکن است در قالب rgb(...) نمایش داده شود. در مقایسه رشته ها، این تفاوت را در نظر بگیرید و در صورت نیاز مقدار را به شکل استاندارد تبدیل کنید.

همچنین بهتر است خواندن یک ویژگی را از تغییر آن جدا نگه دارید. فراخوانی تک پارامتری برای خواندن است و فراخوانی دو پارامتری برای نوشتن. این تفاوت کوچک، از اشتباه در فهم کد جلوگیری می کند و هنگام نگهداری یا توسعه برنامه، منطق هر دستور را روشن تر نشان می دهد.

متد css() زمانی مناسب است که مقدار یک ویژگی را بخوانید یا تغییری مشخص و محدود را در زمان اجرا اعمال کنید. با این حال، برای حالت هایی مانند فعال، غیرفعال، هشدار یا انتخاب شده، معمولا بهتر است ظاهر در فایل CSS تعریف شود و jQuery فقط کلاس مربوط را اضافه یا حذف کند.

برای نمونه، می توانید ظاهر پیام خطا را در CSS نگه دارید و هنگام نیاز، کلاس آن را با jQuery تغییر دهید. این شیوه موجب می شود رنگ ها و فاصله ها در یک بخش قابل مدیریت باقی بمانند و کد رفتاری از کد مربوط به ظاهر جدا شود. در نتیجه، ویرایش طراحی در آینده آسان تر خواهد بود.

اگر تغییر فقط شامل یک مقدار متغیر باشد، مانند عرضی که از ورودی کاربر محاسبه شده، استفاده مستقیم از css() می تواند راه حل ساده ای باشد. اما اگر چندین ویژگی ثابت به شکل یک حالت تکراری تغییر می کنند، کلاس ها معمولا انتخابی منظم تر هستند.

ساختار متد به هدف شما بستگی دارد. برای خواندن یک ویژگی، یک پارامتر می فرستید؛ برای تغییر یک ویژگی، نام و مقدار را وارد می کنید؛ و برای تنظیم چند ویژگی، یک شیء شامل چند جفت نام و مقدار به کار می برید.

$( "selector" ).css( "property" );
$( "selector" ).css( "property", "value" );
$( "selector" ).css({
  "property-one": "value-one",
  "property-two": "value-two"
});

selector مشخص می کند کدام عنصر یا عناصر HTML هدف هستند. انتخابگر می تواند نام تگ، کلاس یا شناسه باشد. انتخاب دقیق، به ویژه هنگام خواندن مقدار، اهمیت دارد؛ چون در حالت getter مقدار نخستین عنصر انتخاب شده برگردانده می شود.

property نام ویژگی CSS مورد نظر است؛ مانند color، font-size یا background-color. در حالت تنظیم چند ویژگی، نام هر ویژگی به عنوان کلید شیء و مقدار دلخواه آن به عنوان مقدار متناظر نوشته می شود.

value مقدار تازه ای است که برای ویژگی تعیین می کنید. نوع مقدار و واحدهای آن باید با قواعد CSS سازگار باشند. برای مثال، رنگ به یک مقدار معتبر رنگ نیاز دارد و ویژگی هایی مانند اندازه فونت معمولا باید واحد مناسب داشته باشند.

در حالت خواندن، اگر انتخابگر چند عنصر را برگرداند، مقدار ویژگی از نخستین عنصر انتخاب شده دریافت می شود. این رفتار ممکن است هنگام بررسی گروهی از عناصر باعث برداشت اشتباه شود. اگر قصد بررسی عنصر خاصی را دارید، انتخابگر را با شناسه یا کلاس محدود کنید؛ اگر هدف بررسی همه عناصر است، باید از روش تکرار روی مجموعه استفاده کنید.

برای مثال، $("p").css("color") رنگ نخستین پاراگراف را می خواند و گزارشی از رنگ همه پاراگراف ها ارائه نمی دهد. اما وقتی مقدار جدیدی تنظیم می کنید، دستور روی عناصر انتخاب شده اعمال می شود. تفاوت رفتار خواندن و نوشتن را همیشه در تحلیل نتیجه در نظر بگیرید.

مرورگر مقدار CSS را بر اساس قواعد آبشاری، وراثت و سبک های اعمال شده محاسبه می کند. به همین دلیل، نتیجه خواندن همیشه لزوما عین عبارتی نیست که در فایل CSS نوشته اید. هنگام اشکال زدایی، ابزار توسعه مرورگر را نیز بررسی کنید تا مشخص شود کدام قانون در نهایت روی عنصر اثر گذاشته است.

برای مقداردهی ویژگی های اندازه، واحد مناسب را فراموش نکنید. همچنین اگر می خواهید مقدار خوانده شده را با عدد مقایسه کنید یا در محاسبه به کار ببرید، رشته بودن آن را در نظر بگیرید و در صورت لزوم بخش عددی و واحد را با روشی مطمئن مدیریت کنید.

نام ویژگی را دقیق و مطابق CSS بنویسید. اشتباه تایپی در نام هایی مانند background-color ممکن است باعث شود تغییر مورد نظر اعمال نشود. اگر نتیجه را نمی بینید، ابتدا انتخابگر، سپس نام ویژگی و در پایان مقدار ارسالی را بررسی کنید.

برای کدهای قابل نگهداری، بهتر است نام گذاری ویژگی ها در پروژه یکدست باشد. همچنین برای حالت های بصری تکرارشونده، کلاس های CSS را به تغییر مستقیم تعداد زیادی ویژگی ترجیح دهید. این کار از پراکندگی مقادیر طراحی میان فایل های مختلف جلوگیری می کند.

متد css در jQuery راهی ساده برای خواندن مقدار محاسبه شده یک ویژگی یا تغییر یک یا چند ویژگی CSS است. با یک پارامتر مقدار ویژگی را می خوانید، با دو پارامتر یک ویژگی را تنظیم می کنید و با ارسال یک شیء می توانید چند ویژگی را هم زمان تغییر دهید.

برای استفاده دقیق، انتخابگر مناسب بنویسید، رفتار getter را از setter تشخیص دهید و واحدهای CSS را درست به کار ببرید. اگر تغییر ظاهری یک حالت ثابت و تکرارشونده را نمایش می دهد، استفاده از کلاس CSS معمولا نگهداری کد را ساده تر می کند؛ اما برای خواندن مقدار یا تغییر پویای یک ویژگی، متد css() گزینه ای کاربردی است.