در بخش قبلی با دستکاری خصوصیات CSS با jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه دریافت یا ست کردن ابعاد در jQuery مثل عرض (width) و ارتفاع (height) می پردازیم.
درک ابعاد در jQuery
جی کوئری چندین متد مثل height()
, innerHeight()
, outerHeight()
, width()
, innerWidth()
, outerWidth()
برای دریافت و ست کردن ابعاد CSS برای المان ها ارایه داده است.
تصویر زیر را برای درک اینکه این متدها چطور ابعاد یک المان باکس مانند را محاسبه می کنند, بررسی کنید.
متدهای width() و height() جی کوئری
متدهای width()
و height()
در جی کوئری برای دریافت یا ست کردن width و height المان استفاده می شوند.
عرض (width) و ارتفاع (height) شامل padding
, border
و margin
های المان نمی شوند.
مثال زیر عرض و ارتفاع یک المان <div>
را برگشت می دهد.
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var divWidth = $("#box").width(); var divHeight = $("#box").height(); $("#result").html("Width: " + divWidth + ", " + "Height: " + divHeight); }); }); </script> |
مشابه آن, می توانید عرض و ارتفاع المان را با دادن مقدار آن به عنوان پارامتر داخل متدهای width()
و height()
ست کنید.
این مقدار می تواند یک رشته (عدد و واحد اندازه گیری مثل ۱۰۰px, 20em) یا یک عدد باشد.
مثال زیر عرض المان <div>
را به ۴۰۰ پیکسل و ارتفاع را به ۳۰۰ پیکسل تغییر می دهد.
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#box").width(400).height(300); }); }); </script> |
نکته: از آنجا که مقادیر خصوصیات width و height بدون واحد هستند (مثلا ۴۰۰) پس اگر می خواهید از عرض و ارتفاع المان برای محاسبه ریاضی بهره ببرید, پس از متد width()
یا height()
استفاده کنید. درحالی که متدهای css(“width”) یا css(“height”) مقادیر را با واحد (مثلا ۴۰۰px) برگشت می دهند.
متدهای innerWidth() و innerHeight() جی کوئری
متدهای innerWidth()
و innerHeight()
در جی کوئری برای دریافت یا ست کردن عرض و ارتفاع داخلی المان به کار می روند.
این عرض و ارتفاع داخلی شامل padding
می شود اما border
و margin
المان را شامل نمی شوند.
در مثال زیر با کلیک روی یک دکمه, عرض و ارتفاع داخلی المان <div>
برگشت داده می شود.
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var divWidth = $("#box").innerWidth(); var divHeight = $("#box").innerHeight(); $("#result").html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight); }); }); </script> |
مشابه آن, می توانید عرض و ارتفاع داخلی را با پاس دادن مقداری به پارامتر های متد innerWidth()
و innerHeight()
ست کنید. این متدها فقط عرض و ارتفاع محیط محتوای المان را برای مچ شدن با مقدار مشخص شده تغییر می دهند.
برای مثال, اگر عرض فعلی المان ۳۰۰px باشد و جمع padding
چپ و راست نیز برابر ۵۰ باشد پس عرض جدید المان بعد از ست کردن عرض داخلی ۳۵۰ خواهد بود .
New Width = Inner Width - Horizontal Padding
بنابراین مشابه آن می توانید تفاوت ارتفاع را هم محاسبه کنید.
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#box").innerWidth(400).innerHeight(300); }); }); </script> |
متدهای outerWidth() و outerHeight() جی کوئری
متدهای outerWidth()
و outerHeight()
در جی کوئری برای دریافت یا ست کردن عرض و ارتفاع خارجی المان به کار می روند.
این عرض و ارتفاع خارجی شامل padding
و border
می شود اما margin
المان را شامل نمی شود.
در مثال زیر با کلیک روی یک دکمه, عرض و ارتفاع خارجی المان <div>
برگشت داده می شود.
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var divWidth = $("#box").outerWidth(); var divHeight = $("#box").outerHeight(); $("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight); }); }); </script> |
همچنین می توانید عرض و ارتفاع خارحی که شامل padding
, border
, margin
می شود را نیز دریافت کنید. برای اینکار نیاز است که به متدها یک پارامتر true
را نیز اضافه کنید مثلا outerWidth(true)
و outerHeight(true)
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ var divWidth = $("#box").outerWidth(true); var divHeight = $("#box").outerHeight(true); $("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight); }); }); </script> |
می توانید عرض و ارتفاع خارحی را با پاس دادن مقداری به پارامتر های متد outerWidth()
و outerHeight()
ست کنید. این متدها فقط عرض و ارتفاع محیط محتوای المان را برای مچ شدن با مقدار مشخص شده تغییر می دهند.
برای مثال, اگر عرض فعلی المان ۳۰۰px باشد و جمع padding چپ و راست نیز برابر ۵۰ باشد پس عرض جدید المان بعد از ست کردن عرض داخلی ۳۵۰ خواهد بود .
New Width = Outer Width - (Horizontal Padding + Horizontal Border)
بنابراین مشابه آن می توانید تفاوت ارتفاع را هم محاسبه کنید.
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#box").outerWidth(400).outerHeight(300); }); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از دستکاری ابعاد در jQuery نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید