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

علیرضا حاتمی نیا 408

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

با سلام خدمت شما کاربران محترم وبسایت آموزش برنامه نویسی و طراحی وب با قسمت جدیدی از آموزش جی کوئری در خدمت شما هستم.
در جلسه گذشته با متد css() در جی کوئری آشنا شدیم و در این جلسه با آموزش کار با ابعاد در جی کوئری در خدمت شما هستیم.

ابعاد یک عنصر در صفحه

ابعاد یک عنصر در صفحه شامل مقدار عرض یا width و مقدار ارتفاع یا height یک عنصر است.
مثلا اگر یک عنصر دارای عرضی برابر 200 پیکسل و ارتفاعی برابر 100 پیکسل باشد ابعاد آن را 200 در 300 یا 200x100 می گویند.
اما گاهی در صفحه یک عنصر علاوه برا اندازه واقعی خود دارای border,padding,margin نیز می باشند که همین خصوصیات با توجه به مقدارهای خود به اندازه واقعی یک عنصر اضافه می کنند.
مثلا اگر یک عنصر دارای عرضی برابر 300 پیکسل باشد و یک border به اندازه 5 پیکسل نیز داشته باشد، در اینصورت اندازه عرض این عنصر با توجه به ضخامت border برابر با 310 پیکسل می شود.

نمایش ابعاد یک عنصر در صفحه

ابعاد در جی کوئری

در جی کوئری متدهایی برای به دست آوردن مقدار اندازه طول و عرض یک عنصر در هر شرایطی ارائه شده است.
این متدها عبارتند از:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

هر یک از متدهای بالا طول و عرض عنصر را بر اساس یکی از خصوصیات border,padding,margin اندازه گیری میکند که در ادامه به توضیح هر کدام می پردازیم.

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

متد width() برای برگرداندن یا تنظیم مقدار خصوصیت width (عرض) به کار می رود.(شامل padding,border,margin نمی شود)
متد height() برای برگرداندن یا تنظیم مقدار خصوصیت height (ارتفاع) به کار می رود.(شامل padding,border,margin نمی شود)

مثال متد width() و height()

در مثال زیر مقدار خصوصیات width و height توسط alert نمایش داده می شود.

HTML

<div></div>
<button> click </button>

CSS

div {
            width: 400px;
            height: 150px;
            padding: 10px;
            margin: 5px;
            border: 2px solid black;
            background-color: lightgray;
        }

Jquery

$("button").click(function(){
                alert(
                    'width: ' + $("div").width()
                    + ' - ' +
                    'height: ' + $("div").height()
                )
            })

نتیجه کدهای بالا پس کلیک روی دکمه button به صورت زیر می شود.

مثال متد width() و height()

همانطور که مشاهده می کنید مقدار خصوصیات width و height بدون در نظر گرفتن مقدارهای padding,border,margin نمایش داده شده است.

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


متد innerWidth() برای برگرداندن و تنظیم خصوصیت width (عرض) به کار می رود. (مقدار padding محاسبه می شود ولی مقدارهای border,margin محاسبه نمی گردند)
متد innerHeight() برای برگرداندن و تنظیم خصوصیت height (ارتفاع) به کار می رود. (مقدار padding محاسبه می شود ولی مقدارهای border,margin محاسبه نمی گردند)

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

Jquery

$("button").click(function(){
                alert(
                    'width: ' + $("div").innerWidth()
                    + ' - ' +
                    'height: ' + $("div").innerHeight()
                )
            })

خروجی کدهای بالا به صورت زیر میشود.

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

همانطور که مشاهده می کنید مقدار padding برابر با 10 پیکسل بود که به خصوصیات width و height مقدار 20 پیکسل اضافه و نمایش داده شده است.

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

متد outrerWidth() برای برگرداندن و تنظیم خصوصیت width (عرض) به کار می رود. (مقدار padding و border محاسبه می شود ولی مقدارهایmargin محاسبه نمی گردد)
متد outerHeight() برای برگرداندن و تنظیم خصوصیت height (ارتفاع) به کار می رود. (مقدار padding و border محاسبه می شود ولی مقدار margin محاسبه نمی گردد)


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

Jquery

$("button").click(function(){
                alert(
                    'width: ' + $("div").outerWidth()
                    + ' - ' +
                    'height: ' + $("div").outerHeight()
                )
            })

خروجی کدهای بالا به صورت زیر می شود.

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

نکته:
اگر مقدار "true" به متد outerWidth() ارسال شود در آنصورت مقدار margin نیز همراه با padding و border برای خصوصیت width محاسبه می گردد.
اگر مقدار "true" به متد outerHeight() ارسال شود در آنصورت مقدار margin نیز همراه با padding و border برای خصوصیت height محاسبه می گردد.
Jquery

$("button").click(function(){
                alert(
                    'width: ' + $("div").outerWidth(true)
                    + ' - ' +
                    'height: ' + $("div").outerHeight(true)
                )
            })

خروجی کدهای بالا به صورت زیر می شود.

مقدار true برای متدهای outerWidth و outerHeight

 

کلمات کلیدی

جی کوئری

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت