نهم - کار با ابعاد عناصر در جی‌کوئری (Elements Dimension)

1. مروری بر Box Model

در مدل جعبه‌ای (Box Model) هر عنصر از بخش‌های زیر تشکیل شده است:

• Content: محتوای اصلی مثل متن یا تصویر
• Padding: فضای داخلی بین محتوا و مرز عنصر
• Border: خط حاشیه عنصر
• Margin: فاصله بین عنصر و عناصر دیگر

2. متدهای اندازه‌گیری در jQuery

width()

• فقط عرض بخش Content را برمی‌گرداند (بدون padding, border, margin).

$(".dim").width(); // عرض محتوا 

height()

• فقط ارتفاع بخش Content را برمی‌گرداند.

$(".dim").height(); // ارتفاع محتوا 

innerWidth()

• عرض محتوا + padding را برمی‌گرداند (بدون border, margin).

$(".dim").innerWidth();

innerHeight()

• ارتفاع محتوا + padding را برمی‌گرداند.

$(".dim").innerHeight();

outerWidth()

• عرض محتوا + padding + border را برمی‌گرداند.

$(".dim").outerWidth();

outerHeight()

• ارتفاع محتوا + padding + border را برمی‌گرداند.

$(".dim").outerHeight();

نکته: اگر به outerWidth(true) یا outerHeight(true) پارامتر true بدهیم، margin هم حساب می‌شود.

3. نکات مهم

• استفاده از این متدها برای واکنش‌گرایی (Responsive Design) و تنظیم داینامیک اندازه‌ها کاربرد دارد.
• width() و height() مقادیر عددی را برمی‌گردانند (واحد پیکسل).
• می‌توان این متدها را Set هم کرد:

$(".dim").width(300); // تغییر عرض به 300px $(".dim").height(150); // تغییر ارتفاع به 150px