گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/05/31 - 10:30
كد :7803

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

در این مقاله نحوه افزودن ، حذف و یرایش استایل های یک تگ را با کمک جی کوئری توضیح میدهیم.

آموزش جی کوئری

 

جی کوئری بسادگی میتواند با عناصر Css ارتباط برقرار کرده و آنها را بکار بگیرد.

 

بکارگیری CSS توسط جی کوئری

جی کوئری چندین متد برای بکارگیری CSS دارد. در فهرست زیر این متد ها را مرور می کنیم.

  • addClass() : افزودن یک یا چند کلاس به تگ انتخاب شده .
  • removeClass() : حذف یک یا چند کلاس از تگ انتخاب شده .  
  • toggleClass() : سوئیچ کردن بین افزودن و حذف کلاس ها از تگ انتخاب شده
  • css() : ویرایش و یا بازگردانی صفت استایل یک تگ انتخاب شده .

یک مثال Stylesheet

مثال زیر یک فایل Stylesheet را نشان میدهد.

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

.blue {
color: blue;
}

متد addClass() :

مثال زیر نحوه بکارگیری جی کوئری برای افزودن یک صفت جدید به یک یا چند تگ را نشان میدهد:

$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});

مشاهده نتیجه

 

شما میتوانید در متد addClass() چندین کلاس را بیافزاید:

 

$("button").click(function(){
$("#div1").addClass("important blue");
});

مشاهده نتیجه

 

متد removeClass()

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

$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});

مشاهده نتیجه

 

 

متد toggleClass()

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

$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});

مشاهده نتیجه

 

متد css()

این متد را در آموزش بعدی آموزش خواهیم داد.

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :