ابعاد در jQuery

کار با width، height، innerWidth، outerWidth و متدهای ابعاد

متدهای ابعاد

jQuery متدهای مهمی برای کار با ابعاد عناصر دارد:

متدشامل چه چیزهایی است
width() / height()فقط عرض/ارتفاع (بدون padding، border و margin)
innerWidth() / innerHeight()عرض/ارتفاع + padding
outerWidth() / outerHeight()عرض/ارتفاع + padding + border
outerWidth(true) / outerHeight(true)همه موارد + margin

نمودار box model

+-------------------------------------------+
|                 margin                    |
|  +-------------------------------------+  |
|  |              border                 |  |
|  |  +-------------------------------+  |  |
|  |  |            padding            |  |  |
|  |  |  +-------------------------+  |  |  |
|  |  |  |        width/height     |  |  |  |
|  |  |  +-------------------------+  |  |  |
|  |  +-------------------------------+  |  |
|  +-------------------------------------+  |
+-------------------------------------------+

مثال عددی

فرض کنید عنصری با این استایل داریم:

width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
متدنتیجه
width()۲۰۰
innerWidth()۲۴۰ (۲۰۰ + ۲۰×۲ padding)
outerWidth()۲۵۰ (۲۴۰ + ۵×۲ border)
outerWidth(true)۲۷۰ (۲۵۰ + ۱۰×۲ margin)

دریافت و تنظیم

// دریافت
var w = $("#box").width();
console.log("عرض: " + w + " پیکسل");

// تنظیم
$("#box").width(300);
$("#box").height(150);

// با واحد
$("#box").width("50%");

ابعاد صفحه و پنجره

این متدها روی window و document هم کار می‌کنند:

// ابعاد پنجره مرورگر
$(window).width();    // عرض ویوپورت
$(window).height();   // ارتفاع ویوپورت

// ابعاد کل سند
$(document).height(); // ارتفاع کل صفحه (با اسکرول)

مثال کاربردی: تشخیص موبایل

// اگر عرض صفحه کمتر از ۷۶۸ بود، منوی موبایلی نشان بده
function checkScreenSize() {
    if ($(window).width() < 768) {
        $("#mobileMenu").show();
        $("#desktopMenu").hide();
    } else {
        $("#mobileMenu").hide();
        $("#desktopMenu").show();
    }
}

// اجرا در شروع و هنگام تغییر اندازه
checkScreenSize();
$(window).resize(checkScreenSize);

مثال: دکمه بازگشت به بالا

// دکمه «برو به بالا» وقتی کاربر اسکرول کرد
$(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
        $("#scrollTopBtn").fadeIn();
    } else {
        $("#scrollTopBtn").fadeOut();
    }
});

$("#scrollTopBtn").click(function() {
    $("html").animate({ scrollTop: 0 }, 600);
});

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط