Загальна ширина елемента (включаючи прокладку та облямівку) в jQuery

Як і в темі, як можна отримати загальну ширину елемента, включаючи його межу та накладку, використовуючи jQuery? У мене є плагін розмірів jQuery, і працює .width()на моєму 760px-wide, 10px paddingDIV повертається 760.

Можливо, я роблю щось не так, але якщо мій елемент проявляється як 780 pixels wideі Firebug каже мені, що 10px paddingна ньому є, але виклик .width()дає лише 760, мені важко буде зрозуміти, як це зробити.

Дякуємо за будь-які пропозиції.

[Оновлення]

Оригінальна відповідь була написана до jQuery 1.3, і функції, які існували в той час, коли вони не були адекватними самі по собі для обчислення всієї ширини.

Тепер, як правильно стверджує JP , jQuery має функції externalWidth і externalHeight, які включають 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

Розділіть на кілька рядків, щоб зробити його більш читабельним

Таким чином, ви завжди отримаєте правильне обчислене значення, навіть якщо ви зміните значення padding або margin з css

Хтось інший, натрапляючи на цю відповідь, повинен зауважити, що jQuery зараз (> = 1.3) має outerHeight/ outerWidthфункціонує для отримання ширини, включаючи прокладку / рамки, наприклад

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

Щоб також включити маржу, просто пройдіть true:

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

схоже, зовнішня ширина порушена в останній версії jquery.

Розбіжність буває, коли

зовнішній div має плаваючий, внутрішній div має набір ширини (менший, ніж зовнішній div), внутрішній div має style = "margin: auto"

Просто для простоти я вклав велику відповідь Андреаса Греха вище в деяких функціях. Для тих, хто хоче трохи щастя.

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;
}

ті ж веб-переглядачі можуть повернути рядок для ширини межі, у цьому розборі повернеться NaN, тому переконайтеся, що ви правильно аналізуєте значення int.

        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"));

$(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>