Total lebar elemen (termasuk padding dan border) di jQuery

Seperti dalam subjek, bagaimana seseorang bisa mendapatkan lebar total elemen, termasuk perbatasan dan bantalannya, menggunakan jQuery? Saya punya plugin dimensi jQuery, dan berjalan .width()pada saya 760px-wide, 10px paddingpengembalian DIV 760.

Mungkin saya melakukan sesuatu yang salah, tetapi jika elemen saya memanifestasikan dirinya sebagai 780 pixels widedan Firebug mengatakan kepada saya bahwa ada 10px paddingdi dalamnya, tetapi menelepon .width()hanya memberi 760, saya akan kesulitan untuk melihat bagaimana.

Terima kasih atas sarannya.

[Memperbarui]

Jawaban aslinya ditulis sebelum jQuery 1.3, dan fungsi-fungsi yang ada pada saat itu tidak cukup untuk menghitung lebar keseluruhan.

Sekarang, seperti yang dinyatakan JP dengan benar, jQuery memiliki fungsi outerWidth dan outerHeight yang mencakup borderdan paddingsecara default, dan juga marginjika argumen pertama dari fungsi tersebut adalahtrue

[Jawaban asli]

The widthMetode tidak lagi membutuhkandimensions Plugin, karena telah ditambahkan kejQuery Core

Yang perlu Anda lakukan adalah mendapatkan nilai padding, margin, dan border edge dari div tersebut dan menambahkannya ke hasil width metode

Sesuatu seperti ini:

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

Pisahkan menjadi beberapa baris agar lebih mudah dibaca

Dengan begitu Anda akan selalu mendapatkan nilai perhitungan yang benar, bahkan jika Anda mengubah nilai padding atau margin dari css

Siapa pun yang menemukan jawaban ini harus mencatat bahwa jQuery sekarang (> = 1.3) memiliki outerHeight/ outerWidthfungsi untuk mengambil lebar termasuk padding / batas, misalnya

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

Untuk memasukkan margin juga, cukup kirimkan true:

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

Sepertinya outerWidth rusak di jquery versi terbaru.

Perbedaan terjadi ketika

div luar melayang, div dalam memiliki set lebar (lebih kecil dari div luar) div dalam memiliki style = "margin: auto"

Demi kesederhanaan, saya merangkum jawaban hebat Andreas Grech di atas dalam beberapa fungsi. Bagi mereka yang menginginkan sedikit kebahagiaan cut-and-paste.

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

browser yang sama dapat mengembalikan string untuk lebar perbatasan, di parseInt ini akan mengembalikan NaN jadi pastikan Anda mengurai nilai ke int dengan benar.

        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>