سبد (0)

دستکاری ظاهر عناصر در jQuery

با jQuery به آسانی می توانید ظاهر عناصر (CSS) را دستکاری کنید.


دستکاری ظاهر عناصر HTML

ما در اینجا به چهار متد که در jQuery برای دستکاری ظاهر عناصر استفاده می شود، اشاره خواهیم کرد:

  • ()addClass - اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده
  • ()removeClass - حذف کردن یک یا چند کلاس از عنصر/عناصر انتخاب شده
  • ()toggleClass - حرکت بین متدهای ()addClass و ()removeClass
  • ()css - تنظیم یک خصوصیت CSS یا برگرداندن مقدار آن 

در تمام مثال های این صفحه، کلاس های "important" و "blue" استفاده خواهد شد:

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

متد ()addClass در jQuery

متد ()addClass، برای اضافه کردن یک یا چند کلاس به عنصر/عناصر انتخاب شده استفاده می شود.

در مثال زیر، چگونگی اضافه کردن کلاس به عناصر نشان داده شده است، البته زمان اضافه کردن می توانید چندین عنصر را انتخاب کنید:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
خودتان امتحان کنید »

شما همچنین می توانید در متد ()addClass، چندین کلاس را مشخص نمایید:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("#div1").addClass("important blue");
});
خودتان امتحان کنید »

متد ()removeClass در jQuery

متد ()removeClass، برای حذف یک یا چند کلاس از عنصر/عناصر انتخاب شده استفاده می شود.

در مثال زیر، چگونگی حذف کلاس از عناصر نشان داده شده است:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});
خودتان امتحان کنید »

متد ()toggleClass در jQuery

متد ()toggleClass، برای حرکت بین متدهای ()addClass و ()removeClass استفاده می شود.

در مثال زیر، چگونگی استفاده از متد ()toggleClass نشان داده شده است:

مثال (دستکاری ظاهر عناصر در jQuery)

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
خودتان امتحان کنید »

متد ()css در jQuery

متد ()css، در مطلب بعدی توضیح داده خواهد شد.

jQuery CSS Reference

For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه