آموزش تنظیم کلاس های CSS-مدیریت ظاهر عناصر

سلام عزیزان خوبین؟ امیدوارم که شاد باشید . در این قسمت در مورد تنظیم کلاس های Css مطلبی رو براتون اماده کردم.

jQuery – بازیابی و تنظیم کلاس های CSS (مدیریت ظاهر عناصر)

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

دستکاری CSS

برای این منظور jQuery چندین متد در اختیار طراح سایت قرار می دهد. در این فصل توابع زیر را شرح خواهیم داد:

()addClass – اضافه کردن یک یا چند کلاس به المان های انتخاب شده

()removeClass – حذف کردن یک یا چند کلاس از عناصر انتخابی

()toggleClass – تغییر وضعیت بین متدهای ()addClass و ()removeClass

()css – یک خصیصه را تنظیم کرده یا مقدار آن را برمی گرداند (متد css می تواند چندین خصیصه css یک عنصر HTML را برگردانده و یا به مقدار دلخواه تنظیم کند).

صفحه ی سبک دهی (stylesheet) نمونه ی زیر برای تمامی مثال های این درس بکار می رود:

.important {

font-weight: bold;

font-size: xx-large;

}

.blue {

color: blue;

}

متد addClass()

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

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸

$(document).ready(function () {
$(“button”).click(function () {
$(“h1, h2, p”).addClass(“blue”);
$(“div”).addClass(“important”);
});
});

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

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).addClass(“important blue”);
});
});

متد removeClass()

مثال زیر نحوه ی حذف کردن class attribute معین از المان های مختلف را نمایش می دهد:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“h1, h2, p”).removeClass(“blue”);
});
});

متد toggleClass()

نمونه ی زیر چگونگی استفاده از متد toggleclass() را نمایش می دهد. این متد بین افزودن/حذف کلاس از المان های انتخابی تغییر وضعیت می دهد.

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“h1, h2, p”).toggleClass(“blue”);
});
});