به دست آوردن اندازه ارتفاع (Height) و عرض (Width) یک عنصر (Element)، با در نظر گرفتن Padding (بدون در نظر گرفتن Border و Margin)، با روش های innerWidth و innerHeight ، در jQuery

روش های innerWidth و innerHeight در jQuery ، برای به دست آوردن اندازه ارتفاع (Height) و عرض (Width) یک عنصر (Element)، با در نظر گرفتن Padding (بدون در نظر گرفتن Border و Margin)، به کار می روند.

این روش ها (Method)، اندازه را بر حسب پیکسل (Pixel - px) محاسبه می کنند.

قبل از اینکه مثالی را برای کاربرد روش های innerWidth و innerHeight در jQuery ، ذکر نماییم، بهتر است که یک سری توضیحات کلی در مورد روش های (Method) به دست آوردن ابعاد (ارتفاع و عرض) عنصرها (Element) در jQuery ، ارائه دهیم تا تفاوت آنها را متوجه شوید.

نکته

روش های (Method) زیر برای به دست آوردن ابعاد (ارتفاع و عرض) عنصرها (Element) در jQuery ، به کار می روند :

تفاوت روش های (Method) بالا در این است که آیا مواردی مثل Padding و Border و Margin نیز جزء اندازه عنصر، در نظر گرفته شود یا خیر :

به دست آوردن اندازه ارتفاع (Height) و عرض (Width) یک عنصر (Element)، با در نظر گرفتن Padding (بدون در نظر گرفتن Border و Margin)، با روش های innerWidth و innerHeight ، در jQuery

اگر بخواهیم که تنها ابعاد (ارتفاع و عرض) اصلی خود عنصر را به دست آوریم (یعنی بدون در نظر گرفتن Padding و Border و Margin)، باید از روش های width و height برای به دست آوردن ارتفاع (Height) و عرض (Width) عنصر استفاده نماییم ( کلید شماره 26305 ).

و اگر بخواهیم ابعاد عنصر (ارتفاع و عرض) را با در نظر گرفتن Padding به دست آوریم (بدون در نظر گرفتن Border و Margin)، باید از روش‌ های innerWidth و innerHeight استفاده نماییم ( کلید شماره 26306 ).

و چنانچه بخواهیم ابعاد عنصر (ارتفاع و عرض) را با در نظر گرفتن Padding و Border به دست آوریم (بدون در نظر گرفتن Margin)، روش های outerWidth و outerHeight به کار می روند ( کلید شماره 26307 ).

و برای به دست آوردن ابعاد عنصر (ارتفاع و عرض)، با در نظر گرفتن Padding و Border و Margin ، باید از روش های outerWidth و outerHeight استفاده نماییم، به این صورت که کلمه true درون پرانتز آنها ذکر گردد ( کلید شماره 26308 ) :

به مثال زیر توجه کنید :

مثال

در صفحه HTML ، با استفاده از تگ p ، یک پاراگراف می سازیم و با استفاده از کدهای CSS ، اندازه ارتفاع (Height) و عرض (Width) و Padding و Border و Margin آن را به طور دقیق مشخص می کنیم و همچنین یک رنگ پس زمینه برای آن مشخص می کنیم، تا حدود آن قابل تشخیص باشد.

سپس یک دکمه (Button) در صفحه خواهیم داشت که با کلیک کاربر بر روی آن، یک سری کد jQuery اجرا می شوند که برای محاسبه اندازه ارتفاع (Height) و عرض (Width) پاراگراف (تگ p)، با در نظر گرفتن Padding (بدون در نظر گرفتن Border و Margin)، به کار رفته و نتیجه را هم در بخشی از صفحه HTML نمایش می دهند.

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.11.1.min.js"></script>
        
        <style>
            #kelidestan_paragraph {
                background-color:#0F6;
                width:300px;
                height:200px;
                padding:10px;
                border:5px dashed red;
                margin:20px;
            }
        </style>
    </head>

<body>
        <p id="kelidestan_paragraph">
            kelidestan.com
        </p>
        
        <button id="kelidestan_button">
            Button
        </button>
        
        <p id="kelidestan_result">
        </p>
                
        <script>
            $(document).ready(function(){
                $("#kelidestan_button").click(function(){
                    var w = $("#kelidestan_paragraph").innerWidth();
                    var h = $("#kelidestan_paragraph").innerHeight();
                    var text = "Width: " + w + "<br>" +"Height: " + h;
                    $("#kelidestan_result").html(text);
                });
            });
        </script>
    </body>
</html>

همان طور که در کدها مشاهده می کنید، پاراگراف مورد نظرمان که قرار است اندازه ارتفاع (Height) و عرض (Width) آن محاسبه شود را با کدهای زیر تعریف کرده ایم :

و کدهای CSS زیر برای تعیین اندازه ارتفاع (Height) و عرض (Width) و Padding و Border و Margin و رنگ پس زمینه آن، در صفحه HTML نوشته شده است :

در کدهای CSS بالا، رنگ پس زمینه پاراگراف (تگ p با id برابر kelidestan_paragraph) را برابر رنگ سبز (کد رنگی به رنگ سبز) و رنگ خطوط حاشیه (Border) را هم برابر رنگ قرمز تعیین نموده ایم.

ارتفاع (Height) و عرض (Width) آن، به ترتیب برابر 200 و 300 پیکسل و Padding و Border و Margin نیز به تریتب برابر 10 و 5 و 20 پیکسل (px)، انتخاب شده اند.

در صفحه HTML ، یک تگ p دیگر با id برابر kelidestan_result داریم که نتیجه محاسبات در آن نمایش داده می شود (پس از اجرای کدهای jQuery) :

کدهای jQuery ، پس ازکلیک بر روی دکمه (Button) ساخته شده توسط تگ button (با id برابر kelidestan_button)، اجرا خواهند شد :

کدهای jQuery صفحه عبارتند از :

بنابراین پس از کلیک بر روی دکمه (Button)، کدهای jQuery زیر اجرا می شوند ( کلید شماره 2787 ) :

در کدهای بالا، ابتدا اندازه ارتفاع (Height) و عرض (Width) پاراگراف (تگ p با id برابر kelidestan_paragraph)، با در نظر گرفتن Padding (بدون در نظر گرفتن Border و Margin)، را محاسبه نموده و سپس متنی را بر اساس نتایج محاسبات، در عنصر دارای id برابر kelidestan_result از صفحه، نمایش داده ایم (با روش html).