Larghezza totale dell'elemento (inclusi imbottitura e bordo) in jQuery

Question

Come nel soggetto, come si può ottenere la larghezza totale di un elemento, inclusi il suo bordo e la sua imbottitura, usando jQuery? Ho il plug-in di dimensioni jQuery ed eseguo .width () sul mio DIV con imbottitura da 760 pixel e 10 pixel restituisce 760.

Forse sto facendo qualcosa di sbagliato, ma se il mio elemento si manifesta con una larghezza di 780 pixel e Firebug mi dice che c'è una spaziatura di 10px su di esso, ma chiamare .width () dà solo 760, mi farebbe fatica a vedere come.

Grazie per eventuali suggerimenti.

Answer 1

[Aggiornamento]

La risposta originale è stata scritta prima di jQuery 1.3 e le funzioni esistenti al momento non erano adeguate da sole per calcolare l'intera larghezza.

Ora, come JP afferma correttamente, jQuery ha le funzioni outerWidth e outerHeight che includono border e padding per impostazione predefinita e anche margin se il primo argomento della funzione è true

---

[Risposta originale]

Il metodo width non richiede più il dimensions plug-in, poiché è stato aggiunto al jQuery Core

Quello che devi fare è ottenere i valori di riempimento, margine e larghezza del bordo di quel particolare div e aggiungerli al risultato del metodo <=>

Qualcosa del genere:

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

Dividi in più righe per renderlo più leggibile

In questo modo otterrai sempre il valore calcolato corretto, anche se cambi i valori di riempimento o margine dal css

Answer 2

Qualcun altro che si imbatte in questa risposta dovrebbe notare che jQuery ora (> = 1.3) ha outerHeight/outerWidth per recuperare la larghezza compresi imbottitura / bordi, ad es.

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

Per includere anche il margine, passa semplicemente true :

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

Answer 3

sembra come outerWidth sia rotto nell'ultima versione di jquery.

La discrepanza si verifica quando

il div esterno è flottato, il div interno ha la larghezza impostata (minore del div esterno) il div interno ha style = " margin: auto "

Answer 4

Solo per semplicità ho incapsulato la grande risposta di Andreas Grech sopra in alcune funzioni. Per coloro che vogliono un po 'di felicità taglia e incolla.

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

gli stessi browser possono restituire una stringa per la larghezza del bordo, in questo casoInt restituirà NaN quindi assicurati di analizzare il valore in int correttamente.

        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>