Całkowita szerokość elementu (łącznie z dopełnieniem i obramowaniem) w jQuery

Jak w temacie, jak można uzyskać całkowitą szerokość elementu, w tym jego obramowanie i wypełnienie, używając jQuery? Mam wtyczkę wymiarów jQuery i działam .width()na moim 760px-wide, 10px paddingDIV zwraca 760.

Być może robię coś złego, ale jeśli mój element objawia się jako, 780 pixels widea Firebug mówi mi, że jest 10px paddingna nim, ale wywołanie .width()daje tylko 760, trudno byłoby mi zobaczyć, jak.

Dzięki za wszelkie sugestie.

[Aktualizacja]

Oryginalna odpowiedź została napisana przed jQuery 1.3, a funkcje, które istniały w tym czasie, nie były same w sobie wystarczające do obliczenia całej szerokości.

Teraz, jak słusznie stwierdza JP , jQuery ma funkcje externalWidth i externalHeight, które domyślnie zawierają borderi padding, a także marginjeśli pierwszym argumentem funkcji jesttrue

[Oryginalna odpowiedź]

Ta widthmetoda nie wymaga już dimensionswtyczki, ponieważ została dodana dojQuery Core

To, co musisz zrobić, to pobrać wartości dopełnienia, marginesu i szerokości obramowania tego konkretnego elementu div i dodać je do wyniku widthmetody

Coś takiego:

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

Podziel na wiele wierszy, aby były bardziej czytelne

W ten sposób zawsze otrzymasz poprawną obliczoną wartość, nawet jeśli zmienisz wartości dopełnienia lub marginesów z css

Każdy, kto natknie się na tę odpowiedź, powinien zauważyć, że jQuery teraz (> = 1.3) ma outerHeight/ outerWidthfunkcje do pobierania szerokości, w tym dopełnienia / obramowań, np.

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

Aby uwzględnić również margines, po prostu przekaż true:

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

wygląda na to, że zewnętrzna szerokość jest zepsuta w najnowszej wersji jquery.

Rozbieżność występuje, gdy

element div zewnętrzny jest zmienny, element div wewnętrzny ma ustawioną szerokość (mniejszy niż element div zewnętrzny), a element div wewnętrzny ma style = "margin: auto"

Dla ułatwienia zawarłem świetną odpowiedź Andreasa Grecha powyżej w niektórych funkcjach. Dla tych, którzy chcą trochę szczęścia typu „wytnij i wklej”.

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

te same przeglądarki mogą zwracać ciąg znaków dla szerokości obramowania, w tym parseInt zwróci NaN, więc upewnij się, że przeanalizowałeś poprawnie wartość 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>