آموزش جی کوئری – ابعاد در jQuery

  • آپدیت شده در تاریخ

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

در بخش قبلی با دستکاری خصوصیات CSS با jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه دریافت یا ست کردن ابعاد در jQuery مثل عرض (width) و ارتفاع (height) می پردازیم.

 

درک ابعاد در jQuery

جی کوئری چندین متد مثل height(), innerHeight(), outerHeight(), width(), innerWidth(), outerWidth() برای دریافت و ست کردن ابعاد CSS برای المان ها ارایه داده است.

تصویر زیر را برای درک اینکه این متدها چطور ابعاد یک المان باکس مانند را محاسبه می کنند, بررسی کنید.

آموزش جی کوئری – ابعاد در jQuery

متدهای width() و height() جی کوئری

متدهای width() و height() در جی کوئری برای دریافت یا ست کردن width و height المان استفاده می شوند.

عرض (width) و ارتفاع (height) شامل padding, border و margin های المان نمی شوند.

مثال زیر عرض و ارتفاع یک المان <div> را برگشت می دهد.

مشابه آن, می توانید عرض و ارتفاع المان را با دادن مقدار آن به عنوان پارامتر داخل متدهای width() و height() ست کنید.

این مقدار می تواند یک رشته (عدد و واحد اندازه گیری مثل ۱۰۰px, 20em) یا یک عدد باشد.

مثال زیر عرض المان <div> را به ۴۰۰ پیکسل و ارتفاع را به ۳۰۰ پیکسل تغییر می دهد.

نکته: از آنجا که مقادیر خصوصیات width و height بدون واحد هستند (مثلا ۴۰۰) پس اگر می خواهید از عرض و ارتفاع المان برای محاسبه ریاضی بهره ببرید, پس از متد width() یا height() استفاده کنید. درحالی که متدهای css(“width”) یا css(“height”) مقادیر را با واحد (مثلا ۴۰۰px) برگشت می دهند.

 

متدهای innerWidth() و innerHeight() جی کوئری

متدهای innerWidth() و innerHeight() در جی کوئری برای دریافت یا ست کردن عرض و ارتفاع داخلی المان به کار می روند.

این عرض و ارتفاع داخلی شامل padding می شود اما border و margin المان را شامل نمی شوند.

در مثال زیر با کلیک روی یک دکمه, عرض و ارتفاع داخلی المان <div> برگشت داده می شود.

مشابه آن, می توانید عرض و ارتفاع داخلی را با پاس دادن مقداری به پارامتر های متد innerWidth() و innerHeight() ست کنید. این متدها فقط عرض و ارتفاع محیط محتوای المان را برای مچ شدن با مقدار مشخص شده تغییر می دهند.

برای مثال, اگر عرض فعلی المان ۳۰۰px باشد و جمع padding چپ و راست نیز برابر ۵۰ باشد پس عرض جدید المان بعد از ست کردن عرض داخلی ۳۵۰ خواهد بود .

New Width = Inner Width - Horizontal Padding

بنابراین مشابه آن می توانید تفاوت ارتفاع را هم محاسبه کنید.

 

متدهای outerWidth() و outerHeight() جی کوئری

متدهای outerWidth() و outerHeight() در جی کوئری برای دریافت یا ست کردن عرض و ارتفاع خارجی المان به کار می روند.

این عرض و ارتفاع خارجی شامل padding و border می شود اما margin المان را شامل نمی شود.

در مثال زیر با کلیک روی یک دکمه, عرض و ارتفاع خارجی المان <div> برگشت داده می شود.

همچنین می توانید عرض و ارتفاع خارحی که شامل padding, border, margin می شود را نیز دریافت کنید. برای اینکار نیاز است که به متدها یک پارامتر true را نیز اضافه کنید مثلا outerWidth(true) و outerHeight(true)

می توانید عرض و ارتفاع خارحی را با پاس دادن مقداری به پارامتر های متد outerWidth() و outerHeight() ست کنید. این متدها فقط عرض و ارتفاع محیط محتوای المان را برای مچ شدن با مقدار مشخص شده تغییر می دهند.

برای مثال, اگر عرض فعلی المان ۳۰۰px باشد و جمع padding چپ و راست نیز برابر ۵۰ باشد پس عرض جدید المان بعد از ست کردن عرض داخلی ۳۵۰ خواهد بود .

New Width = Outer Width - (Horizontal Padding + Horizontal Border)

بنابراین مشابه آن می توانید تفاوت ارتفاع را هم محاسبه کنید.

 

امیدوارم در این بخش آموزش جی کوئری, از دستکاری ابعاد در jQuery نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی