JQuery'deki öğenin toplam genişliği (dolgu ve kenarlık dahil)

Konuda olduğu gibi, jQuery kullanarak bir öğenin kenarlığı ve dolgusu da dahil olmak üzere toplam genişliğini nasıl alabilirim? Ben jQuery boyutları eklentisi var ve .width()benim üzerinde çalışan 760px-wide, 10px paddingDIV döner 760.

Belki de yanlış bir şey yapıyorum, ama elementim kendini gösteriyorsa 780 pixels wideve Firebug bana bunun 10px paddingüzerinde olduğunu söylüyorsa , ama .width()sadece 760'ı çağırmak , nasıl olduğunu görmek zor olurdu.

Herhangi bir öneriniz için teşekkürler.

[Güncelleme]

Orijinal cevap, jQuery 1.3'ten önce ve tüm genişliği hesaplamak için yeterli olmadığı zaman mevcut olan fonksiyonlar yazılmıştır.

Şimdi, JP düzgün devletleri, jQuery işlevlere sahiptir outerWidth ve outerHeight dahil borderve paddingvarsayılan olarak, hem de marginişlevi ilk argüman isetrue

[Orijinal cevap]

widthYöntem artık gerektirir dimensionso eklendikten çünkü, eklentijQuery Core

Yapmanız gereken, söz konusu div'in dolgu, kenar boşluğu ve kenarlık genişliği değerlerini almak ve bunları widthyöntemin sonucuna eklemek.

Bunun gibi bir şey:

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

Daha okunabilir hale getirmek için birden çok satıra bölün

Bu şekilde, dolgu veya kenar boşluğu değerlerini css'den değiştirseniz bile, her zaman doğru hesaplanmış değeri alırsınız.

Bu cevabı tökezleyen herkes, jQuery'nin (> = 1.3) dolgu / kenarlıklar dahil genişliği almak için outerHeight/ outerWidthişlevlerine sahip olduğunu, örneğin

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

Kenar boşluğunu da dahil etmek için şunları iletmeniz yeterlidir true:

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

outerWidth, jquery'nin en son sürümünde bozuk gibi görünüyor.

Tutarsızlık,

dış div yüzer, iç div genişlik ayarlanmış (dış div daha küçük) iç div stil = "kenar boşluğu: otomatik"

Sadece basitlik için Andreas Grech'in büyük cevabını bazı fonksiyonlarda kapsadım. Biraz kes ve yapıştır mutluluk isteyenler için.

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

aynı tarayıcılar kenarlık genişliği için dize döndürebilir, bu ayrıştırmada NaN döndürür, bu nedenle değeri int olarak düzgün bir şekilde ayrıştırdığınızdan emin olun.

        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>