آموزش متد css در جی کوئری

دوباره سلام می کنم خدمت شما همراهان گرامی وبسایت آموزش برنامه نویسی و همچنین علاقه مندان به آموزش jquery
در جلسه قبل با آموزش تغییر ظاهر عناصر در جی کوئری آشنا شدید و در این جلسه با آموزش متد css() در جی کوئری در خدمت شما هستیم.

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

گاهی اوقات در روند طراحی سایت لازم است تا خصوصیات CSS یک یا چند عنصر را توسط جی کوئری گرفته و تغییرشان دهید.
متد css() در جی کوئری یک یا چند خاصیت (خصوصیات) CSS مربوط به یک یا چند عنصر را برمی گرداند و یا مقدار آنها را تغییر می دهد.
مثلا توسط متد css() می توانید رنگ متن یا رنگ پیش زمینه یک عنصر را به رنگ دیگری تغییر دهید.

برگرداندن مقدار یک خصوصیت CSS

نگارش کلی برگرداندن مقدار یک خصوصیت CSS توسط متد css() به شکل زیر است:

  css("propertyname");

مثال :

در مثال زیر مقدار خصوصیت "font-size" تنظیم شده روی عنصر <p> را به صورت پیام هشدار نمایش می دهیم.
HTML

  <p style="font-size:10px;">This is a paragraph.</p>

Jquery

  $("button").click(function(){          alert("font size = " + $("p").css("font-size"));      });  

خروجی کدهای بالا به صورت زیر می شود:
 
تغییر مقدار یک خصوصیت CSS

نگارش متد css() جهت تنظیم یا تغییر مقدار یک خصوصیت CSS به شکل زیر است:

  css("property_name","value");

مثال:

در مثال زیر فونت تمامی تگ های <p> صفحه را به مقدار 40px تغییر می دهیم:
HTML

  <p style="font-size:10px;">This is a paragraph.</p>  <p style="font-size:20px;">This is a paragraph.</p>  <p style="font-size:30px;">This is a paragraph.</p>

 
Jquery

  $("button").click(function(){          $("p").css("font-size", "40px");      });  

نتیجه کدهای بالا به صورت زیر می شود:
 
تغییر یا تنظیم چندین مقدار خصوصیات CSS

نگارش متد css() در جی کوئری جهت تغییر یا تنظیم مقدار خصوصیات CSS عناصر به شکل زیر است:

  css({"property_name":"value","property_name":"value",...});

مثال:

در مثال زیر مقدار خصوصیات color و font-size برای تمامی تگ های <p> در صفحه را تغییر می دهیم.

HTML

  <p style="background-color:#ff0000">This is a paragraph.</p>  <p style="background-color:#00ff00">This is a paragraph.</p>  <p style="background-color:#0000ff">This is a paragraph.</p>

Jquery

   $("button").click(function(){          $("p").css({"font-size": "40px","color" : "green"});      });