آموزش jQuery – فصل پنجم : تغییر استایل در جی کوئری

فصل پنجم :

تغییر استایل در جی کوئری :

توسط jquery میتوانید مستقیما استایل یک شی را در صفحه تغییر دهید . برای تغییر استایل چند تابع مهم وجود دارد :

 

  • $(selector).css(name,value)
  • $(selector).css({properties})
  • $(selector).css(name)
  • $(selector).height(value)
  • $(selector).width(value)

توسط تابع css به سه روش فوق میتوان مقدار استایل عناصر را تغییر داد .

$(selector).css(name,value)

در این دستور مقدار value را برای خصوصیت name در تمام عناصر html مطابق با selector تنظیم میکند.

$(“p”).css(“background-color”,”yellow”);

عبارت بالا رنگ پیش زمینه همه پاراگراف های موجود در صفحه را به زرد تبدیل میکند.

$(selector).css({properties}) :

این دستور برای تنظیم چندین خصوصیت css برای عناصر انتخابی می باشد . به عنوان مثال :

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

عبارت فوق رنگ پیش زمینه پاراگرافها را زرد و اندازه نوشته آنها را دوبرابر میکند. همانطور که میبینید هر خوصوصیت با یک کاما “,” از خصوصیت بعدی جدا میشود و همه خصوصیت ها بین { و } قرار گرفته اند.

$(selector).css(name) :

این دستور مقدار خصوصیت name از عنصر selector را برمیگرداند . مثلا :

$(this).css(“color”);

عبارت فوق مقدار رنگ نوشته عنصر جاری را برمیگرداند .

$(selector).height(value)

$(selector).width(value)

دو تابع width و height به ترتیب برای تغییر اندازه عرض و ارتفاع selector ها استفاده میشود :

$(“#boxinfo”).height(“200px”);

عبارت فوق مقدار ارتفاق عنصری با آیدی boxinfo در صفحه را 200 پیکسل میکند.

$(this).width(“200px”).height(“200px”);

عبارت فوق اندازه عرض و ارتفاع عنصر جاری را برابر 200پیکسل میکند.

نکته : دو تابع width و height در صورتی که بدون پارامتر استفاده شوند به ترتیب مقدار عرض و ارتفاع عنصر انتخابی را بر میگردانند.

افزودن و حذف کلاس :

$(selector).addClass(classname);

$(selector).removeClass(classname);

توسط دو دستور فوق میتوان یک کلاس css را به عناصر انتخابی اضافه نمود و یا اگر عناصری دارای کلاسی هستند آن کلاس را حذف کرد .

مثال :

 

<html>

<head>

<script src=”jquery.js” type=”text/javascript” ></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘button’).mouseover(function(){

$(‘p’).addClass(‘info’);

})

$(‘button’).mouseout(function(){

$(‘p’).removeClass(‘info’);

})

})

</script>

<title>Example 1</title>

<style>

.info {

background:#000;

color:#FFF;

}

</style>

</head>

<body>

<button>move mouse to add or remove </button>

<p>paragraph 1</p>

<p class=”info”> paragraph 2 whit class info</p>

</body></html>

در کد فوق پس از اجرا با بردن موس روی دکمه کلاس info به پاراگراف ها اعمال میشود و با برن موس به خارج از دکمه کلاس info حذف میشود.

نکته : توسط دستور (selector).toggleClass(content)$ میتوان به عنصری کلاسی را اضافه کرد و در صورتی که عنصر از این کلاس استفاده میکند آن را حذف کرد . (تغییر وضعیت بین اضافه و حذف کلاس content برای عنصر selector ) .

hasClass(classname):

مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .

if ( $(‘#mydiv’).hasClass(‘info’) )
alert(‘mydiv has class info’);

position() :

$(selector).position()

این تابع فاصله selector را از بالا و چپ صفحه مشخص میکند . برای دسترسی به فاصله بالا از .top و برای دسترسی به فاصله چپ از .left استفاده میشود :

var pos = $(‘#mydiv’).position();
var left = pos.left;
var top = pos.top;

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *