Largura total do elemento (incluindo preenchimento e borda) em jQuery

Como no assunto, como se pode obter a largura total de um elemento, incluindo sua borda e preenchimento, usando jQuery? Eu tenho o plug-in de dimensões jQuery, e rodando .width () no meu DIV de 760px de largura, 10px, retorna 760.

Talvez eu esteja fazendo algo errado, mas se meu elemento se manifestar como 780 pixels de largura e o Firebug me disser que há padp de 10px nele, mas chamar .width () só dá 760, eu ficaria difícil ver como.

Obrigado por qualquer sugestão.

[Atualizar]

A resposta original foi escrita antes do jQuery 1.3 e as funções que existiam no momento eram inadequadas para calcular a largura total.

Agora, como JP afirma corretamente, jQuery tem as funções outerWidth e outerHeight que incluem a border e o padding por padrão, e também a margin se o primeiro argumento da function for true


[Resposta original]

O método width não requer mais o plugin de dimensions , porque foi adicionado ao jQuery Core

O que você precisa fazer é obter o preenchimento, a margem e os valores de largura da borda desse div específico e adicioná-los ao resultado do método width

Algo assim:

 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 

Dividido em várias linhas para torná-lo mais legível

Dessa forma, você sempre obterá o valor computado correto, mesmo se você alterar os valores de preenchimento ou margem do css

Qualquer um que tropeçar nessa resposta deve observar que jQuery agora (> = 1.3) tem funções outerWidth / outerWidth para recuperar a largura, incluindo preenchimento / bordas, por exemplo

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

Para include a margem também, simplesmente passe true :

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

Parece que outerWidth está quebrado na última versão do jquery.

A discrepância acontece quando

a div externa é flutuada, a div interna tem a largura definida (menor que a div externa) a div interna tem style = “margin: auto”

Apenas por simplicidade eu encapsulei a ótima resposta de Andreas Grech em algumas funções. Para aqueles que querem um pouco de felicidade de cortar e colar.

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

mesmos navegadores podem retornar string para largura de borda, nesse parseInt retornará NaN, portanto, certifique-se de analisar o valor para int corretamente.

  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"); }); 
Width of this div container without including padding is:
width of this div container including padding is:
width of this div container including padding and margin is:
Intereting Posts