گروه مقاله : جاوا اسكريپت 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()
این متد را در آموزش بعدی آموزش خواهیم داد.
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد