آموزش متد 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 به شکل زیر است:

 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>

 تغییر مقدار یک خصوصیت CSS در جی کوئری
Jquery

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

نتیجه کدهای بالا به صورت زیر می شود:
 تغییرات در متد css در جی کوئری
تغییر یا تنظیم چندین مقدار خصوصیات 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"});
    });

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

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید