دوره H جی کوئری: درس 4: کار با CSS

دوره H جی کوئری
درس 4: کار با CSS در جی کوئری

در درس قبل روش های کار با ویژگی ها و مقدارهای المنت ها با استفاده از جی کوئری را توضیح دادیم. حالا در این درس می‌خواهیم به نحوه دستکاوری محتوای CSS از قبیل تغییر مقدارهای style، اضافه و حذف class و … بپردازیم.

جی کوئری شامل چندین متد برای دستکاری CSS است.

اضافه کردن و حذف کلاس(ها)ی CSS در المنت‌ها

طبیعی است که شما با استفاده از توضیحات گفته شده در پست قبل میتوانید با متد attr، ویژگی class المنت ها را تغییر دهید اما با attr شما میتوانید کل مقدار بین class را تغییر دهید! بنابراین جی کوئری متدهای کمکی نوشته است تا کار را برایمان ساده تر کند. البته این متدها را خودمان نیز میتوانیم بنویسیم اما چه نیازی است وقتی در جی کوئری به بهترین شکل ممکن نوشته شده است.

متد addClass
با استفاده از این متد، میتوانیم یک یا چند کلاس CSS را به المنت های انتخاب شده اضافه کنیم. برای مثال:

<div>Some text</div>

.fullkade {
  color: blue;
  font-size:x-large;
}

$("div").addClass("fullkade");

این کد، کلاس fullkade را به المنت های div اضافه میکند.

نکته: برای اضافه کردن چند کلاس در یک جا کافی است که آن ها را با یک فاصله از هم جدا کنیم، برای مثال
addClass(“fullkade1 fullkade2 fullkade3”)

متد removeClass
برای حذف یک یا چند کلاس از المنتهای انتخاب شده استفاده میشود. برای مثال فرض کنید میخواهیم کلاس fullkade را از المنتهای div حذف کنیم:

$("div").removeClass("fullkade");

نکته: برای حذف چند کلاس با هم نیز میتوانید همانند متد addClass دوباره آن ها را با یک فاصله از هم جدا کنید.

متد toggleClass
این متد، وضعیت یک کلاس را بین اضافه شدن و حذف کردن بررسی میکند!
یعنی اگر کلاس مورد نظر، از قبل وجود داشت آن را حذف کرده و درصورتی که از قبل وجود نداشت آن را اضافه میکند. برای مثال:

<p>Hello FullKade</p>
<button>Toggle Class</button>

.fullkade {
  color:red;
  font-weight: bold;
}

$(function() {
  $("button").click(function() {
    $("p").toggleClass("fullkade");
  });
});

در این کد، ما زمانی که روی button کلیک میشود، المنت p را گرفته و متد toggleClass را با مقدار fullkade فراخوانی میکنیم. پس اگر کلاس fullkade در المنت p وجود نداشت، به آن اضافه شده و اگر وجود داشت از آن حذف خواهد شد.

ویژگی‌های CSS

در اینجا میخواهیم با ویژگی های CSS ای که برای یک المنت وجود دارند کار کنیم و مقدار آن ها را گرفته یا تغییر دهیم.
جی کوئری برای انجام این کار متد css را تعریف کرده است و با استفاده از این متد میتوانیم کارهای زیر را انجام دهیم:

• گرفتن مفدار یک ویژگی CSS
• تغییر مقدار یک ویژگی CSS
• تغییر مقدار چند ویژگی CSS به صورت یک جا

گرفتن و تغییر مقدار یک ویژگی css
به مثال زیر توجه کنید:

<p>Hello FullKade</p>

p {
  background-color:red;
  color: white;
}

$(function() {
  alert($("p").css("background-color"));
  $("p").css("background-color", "blue");
});

در این مثال ما ویژگی background-color را با استفاده از متد css گرفته و آن را با alert نمایش داده ایم. برای تغییر مقدار ویژگی هم از ورودی دوم این متد استفاده کرده و مقدار blue را تنظیم کرده ایم.

تغییر مقدار چند ویژگی css به صورت یک جا
واضح است که اگر بخواهیم مدام از متد css برای تغییر ویژگی ها استفاده کنیم هم خسته کننده شده و هم شاید سنگین تر شود. جی کوئری برای این کار از  جیسون استفاده میکند. به این صورت که ما در ورودی اول اگر ویژگی ها و مقدارها را با جیسون تنظیم کنیم، جی کوئری آن ها را روی المنت تنظیم خواهد کرد. پس نام و مقدار ویژگی ها را به صورت زیر در متد CSS وارد کنید:

css({"property1":"value","property2":"value",...});

برای مثال در کد زیر میخواهیم ویژگی های المنت P را تغییر دهیم:

$("p").css({"color": "red", "font-size": "200%"});

بنابراین ما ویژگی color و font-size را با فرمت جیسون به صورت یک جا تغییر دادیم. دقت کنید که شما میتوانید ویژگی های دیگر را هم به این فرمت اضافه کنید و چندین ویژگی را یک جا تغییر دهید. پس در نتیجه نیازی به یادگیری فرمت جیسون نیست و با نگاه به کد بالا همه چیز واضح است.

کار با ابعاد و اندازه‌ها در جی کوئری

ما با استفاده از جی کوئری به راحتی میتوانیم مقدار طول و عرض المنت ها را  گرفته یا تغییر دهیم. دو متد width و height بدین منظور تعریف شده اند. بازهم مثل موارد گفته شده در قبل، برای تغییر، مقدار را در ورودی تنظیم میکنیم و برای گرفتن مقدار، متد را بدون ورودی صدا میزنیم.

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

مقدارهای بالا برحسب پیکسل تنظیم میشوند.

نکته ی خیلی مهم: متدهای width و height به ترتیب طول و عرض المنت را بدون در نظر گرفتن padding، border و margin گرفته و تغییر میدهند. یعنی این سه مورد جزء طول و عرض به حساب نمی آیند.
پس برای گرفتن و تغییر مقدارهای این سه مورد متدهای دیگری برایمان آماده شده است.

• متد innerWidth و innerHeight برای گرفتن مقدار طول و عرض با در نظر گرفتن padding استفاده میشود.
• متد outerWidth و outerHeight برای گرفتن مقدار طول و عرض با در نظر گرفتن padding و border استفاده میشود.

در تصویر زیر میتوانید مقدارهای همه متدها را در شکل مشخص شده مشاهده کنید.

برای این که کار با متدهای گفته شده را درک کنید، به مثال زیر توجه کنید:

<div></div>

div {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 3px solid blue;
  background-color: red;
  color: white;
}

$(function() {
  var txt = "";
  txt += "width: " + $("div").width() + " ";
  txt += "height: " + $("div").height() + "<br/>";
  txt += "innerWidth: " + $("div").innerWidth() + "  ";
  txt += "innerHeight: " + $("div").innerHeight() + "<br/>";
  txt += "outerWidth: " + $("div").outerWidth() + "  ";
  txt += "outerHeight: " + $("div").outerHeight();
    
  $("div").html(txt);
});

این مثال را پیاده کنید تا به طور کامل متوجه موضوع شوید.
اما یک سوال: خروجی کد زیر چیست؟

<div style="width:200px"></div>
<script>
$(function() {
  $("div").css("padding", "5px");
  alert($("div").innerWidth());
});
</script>