آموزش تنظیم کلاس های CSS در جی کوئری -Get and Set CSS Classes

حامد محمدیحامد محمدی
82 بازدید
تنظیم کلاس های CSS در جی کوئری
[cdb_box_content]

با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با یکی دیگر از مقالات آموزش جی کوئری در خدمت شما عزیزان هستیم.

می توانید برای مطالعه بیشتر در مورد جی کوئری به این لینک در وب سایت پرینان طرح مراجعه کنید.

در آموزش امروز قصد داریم در مورد تنظیم و دستکاری کلاس های CSS در کتابخانه جی کوئری صحبت کنیم.

در ادامه آموزش همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


جی کوئری  روش های مختلفی برای دستکاری CSS دارد.

مانند:

  • ()addClass
  • ()removeClass
  • ()toggleClass
  • ()css

 

در ادامه همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

توجه داشته باشید که از شیوه نامه زیر برای همه نمونه های موجود در این مقاله استفاده می شود:

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

.blue {
color: blue;
}

[/cdb_box_content]
[cdb_box_content]

متد ()addClass

مثال زیر نحوه افزودن صفات یک کلاس به عناصر مختلف را نشان می دهد.

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

[PHP]
$(“button”).click(function(){
$(“h1, h2, p”).addClass(“blue”);
$(“div”).addClass(“important”);
});
[/PHP]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

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

 

[PHP]
$(“button”).click(function(){
$(“#div1”).addClass(“important blue”);
});
[/PHP]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

روش ()removeClass

مثال  زیر نحوه استفاده از روش ()jQuery removeClass  را نشان می دهد.

این متد، وظیفه حذف یا اضافه کردن یا اضافه کردن کلاس css به المان انتخابی را بر عهده دارد.

 

 

[PHP]
$(“button”).click(function(){
$(“h1, h2, p”).removeClass(“blue”);
});

[/PHP]

نتیجه کد بالا را از این لینک مشاهده کنید.

[/cdb_box_content]

روش ()toggleClass

مثال  زیر نحوه استفاده از روش jQuery toggleClass () را نشان می دهد.

 

 

[PHP]
$(“button”).click(function(){
$(“h1, h2, p”).toggleClass(“blue”);
});

[/PHP]

نتیجه کد بالا را از این لینک مشاهده کنید.

[cdb_box_content]
[/cdb_box_content]
[cdb_box_content]

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

ترجمه و ارائه : رویا نجفی

منبع : وب سایت w3schools

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

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

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت