العرض الإجمالي للعنصر (بما في ذلك الحشو والحدود) في jQuery

Question

كما هو الحال في الموضوع، كيف يمكن الحصول على العرض الإجمالي للعنصر، بما في ذلك الحدود والحشوة، باستخدام jQuery؟لقد حصلت على البرنامج المساعد لأبعاد jQuery، وتشغيل .width() على عرض DIV الذي يبلغ عرضه 760 بكسل، وحشوة DIV مقاس 10 بكسل يُرجع 760.

ربما أفعل شيئًا خاطئًا، ولكن إذا ظهر العنصر الخاص بي بعرض 780 بكسل وأخبرني Firebug أن هناك حشوة بحجم 10 بكسل عليه، لكن الاتصال بـ .width() يعطي 760 فقط، فسيكون من الصعب علي معرفة كيفية القيام بذلك.

شكرا على أي اقتراحات.

Answer 1

[تحديث]

تمت كتابة الإجابة الأصلية قبل jQuery 1.3، والوظائف التي كانت موجودة في ذلك الوقت لم تكن كافية في حد ذاتها لحساب العرض بالكامل.

لم يكن جي بي بشكل صحيح، jQuery لديه الوظائف العرض الخارجي و الارتفاع الخارجي والتي تشمل border و padding افتراضيا، وأيضا margin إذا كانت الوسيطة الأولى للوظيفة true

---

[الإجابة الأصلية]

ال width الطريقة لم تعد تتطلب dimensions البرنامج المساعد، لأنه تمت إضافته إلى jQuery Core

ما عليك القيام به هو الحصول على قيم عرض الحشو والهامش والحدود لهذا القسم المعين وإضافتها إلى نتيجة width طريقة

شيء من هذا القبيل:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

تقسيمها إلى عدة أسطر لجعلها أكثر قابلية للقراءة

بهذه الطريقة ستحصل دائمًا على القيمة المحسوبة الصحيحة، حتى إذا قمت بتغيير قيم الحشو أو الهامش من ملف CSS

Answer 2

يجب على أي شخص آخر يتعثر في هذه الإجابة أن يلاحظ أن jQuery now (>=1.3) لديه outerHeight/outerWidth وظائف لاسترداد العرض بما في ذلك الحشو/الحدود، على سبيل المثال.

$(elem).outerWidth(); // Returns the width + padding + borders

لتضمين الهامش أيضًا، ما عليك سوى التمرير true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

Answer 3

ويبدو مكسورة outerWidth في أحدث نسخة من مسج.

والتناقض يحدث عندما

وطرحت شعبة الخارجي، وشعبة الداخلي لديه مجموعة العرض (أصغر من شعبة الخارجي) وشعبة الداخلي ديه أسلوب = "الهامش: السيارات"

Answer 4

ولمجرد البساطة I مغلفة الجواب أندرياس غريش العظيمة أعلاه في بعض الوظائف. بالنسبة لأولئك الذين يريدون قليلا من قص ولصق السعادة.

function getTotalWidthOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.width();
    value           += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width
    value           += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width
    return value;
}

function  getTotalHeightOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.height();
    value           += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width
    value           += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width
    return value;
}

Answer 5

ونفس المتصفحات قد ترجع سلسلة لعرض الحدود، في هذا parseInt سيعود نان لذلك تأكد من تحليل قيمة لكثافة العمليات بشكل صحيح.

        var getInt = function (string) {
            if (typeof string == "undefined" || string == "")
                return 0;
            var tempInt = parseInt(string);

            if (!(tempInt <= 0 || tempInt > 0))
                return 0;
            return tempInt;
        }

        var liWidth = $(this).width();
        liWidth += getInt($(this).css("padding-left"));
        liWidth += getInt($(this).css("padding-right"));
        liWidth += getInt($(this).css("border-left-width"));
        liWidth += getInt($(this).css("border-right-width"));

Answer 6

$(document).ready(function(){     
$("div.width").append($("div.width").width()+" px");
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px");   
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");         
});


<div class="width">Width of this div container without including padding is: </div>  
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:     </div>