متد css() (css())
متد css() در jQuery کمک می کند ظاهر صفحه را سریع عوض کنی. دیگر لازم نیست همیشه در فایل CSS دنبال تغییر بگردی. فقط با یک خط جاوااسکریپت، رنگ و اندازه را تغییر می دهی.
متد css() در jQuery چیست؟
متد css() در jQuery برای کار با استایل (Style) استفاده می شود. استایل یعنی رنگ، اندازه، فونت و چیزهای ظاهری المنت ها در صفحه. این متد می تواند مقدار یک ویژگی CSS را برگرداند یا آن را تنظیم کند.
نکته: متد css() در jQuery دقیقا روی المنت های انتخاب شده توسط $(...) اجرا می شود؛ یعنی فقط روی همان بخش هایی که انتخاب کرده ای.
خواندن مقدار یک ویژگی CSS با css()
برای گرفتن مقدار یک ویژگی CSS، فقط نام ویژگی را به متد css() می دهیم. یعنی می پرسیم «الان رنگ پس زمینه چیست؟».
css("propertyname");
مثلا این کد مقدار background-color اولین پاراگراف را برمی گرداند. یعنی به اولین <p> نگاه می کند و رنگ پس زمینه آن را می گوید.
$("p").css("background-color");
تنظیم یک ویژگی CSS با css()
حالا می خواهیم مقدار یک ویژگی CSS را عوض کنیم. این بار باید هم نام ویژگی را بدهیم هم مقدار جدید را.
css("propertyname", "value");
در مثال زیر، رنگ پس زمینه همه پاراگراف ها زرد می شود. یعنی هر <p> در صفحه یک هایلایت زرد می گیرد؛ شبیه ماژیک روی متن کتاب.
$("p").css("background-color", "yellow");
نکته: وقتی از متد css() در jQuery برای تنظیم استایل استفاده می کنی، همه المنت های انتخاب شده با هم تغییر می کنند.
تنظیم هم زمان چند ویژگی CSS
گاهی می خواهی چند ویژگی CSS را با هم تنظیم کنی. مثلا هم رنگ را تغییر دهی هم اندازه فونت را. برای این کار، به متد css() در jQuery یک شیء جاوااسکریپت (Object) می دهیم.
css({"propertyname": "value", "propertyname": "value"});
در مثال زیر، برای همه پاراگراف ها هم رنگ پس زمینه زرد می شود هم اندازه فونت دو برابر می شود. این کار شبیه این است که همزمان هم متن را هایلایت کنی هم درشت بنویسی.
$("p").css({
"background-color": "yellow",
"font-size": "200%"
});
گام های تمرینی برای متد css() (css())
- یک صفحه ساده با چند <p> بساز و متن دلخواه بنویس.
- با متد css() در jQuery مقدار background-color اولین پاراگراف را در console.log چاپ کن.
- کدی بنویس که با کلیک روی یک دکمه، رنگ پس زمینه همه پاراگراف ها زرد شود.
- کد را طوری عوض کن که هم زمان رنگ و اندازه فونت را تغییر دهد.
- برای استایل های پیچیده تر، از کلاس ها و صفحه کلاس های CSS (CSS Classes) کنار متد css() استفاده کن.
ارتباط متد css() با دیگر بخش های jQuery
متد css() در jQuery معمولا همراه با کلاس ها و تغییر محتوا استفاده می شود. مثلا می توانی با کلاس های CSS (CSS Classes) استایل های آماده بسازی و با تنظیم محتوا (Set) متن را هم زمان عوض کنی. این ترکیب باعث می شود رابط کاربری شبیه یک اپ حرفه ای شود.
جمع بندی سریع
- متد css() در jQuery برای خواندن و تنظیم استایل المنت ها است.
- css("prop") مقدار یک ویژگی CSS را برمی گرداند.
- css("prop", "value") همان ویژگی را برای همه المنت ها تنظیم می کند.
- css({ ... }) چند ویژگی را هم زمان تغییر می دهد.
- بهترین نتیجه وقتی است که متد css() را با کلاس های CSS ترکیب کنی.