Largeur totale de l'élément (y compris le remplissage et la bordure) dans jQuery

Question

Comme dans le sujet, comment peut-on obtenir la largeur totale d'un élément, y compris sa bordure et son remplissage, en utilisant jQuery? J'ai le plugin jQuery dimensions, et en cours d'exécution .width() sur mon 760px-wide, 10px rembourrage DIV renvoie 760.

Peut-être que je fais quelque chose de mal, mais si mon élément se manifeste comme 780 pixels de large et Firebug me dit qu'il y a 10px padding dessus, mais appeler .width() donne seulement 760, je serais dur de voir comment.

Merci pour vos suggestions.

Answer 1

[Mise à jour]

La réponse originale a été écrite avant jQuery 1.3, et les fonctions qui existaient à l'époque où ne suffisent pas par eux-mêmes pour calculer la largeur.

Maintenant, comme J-P indique correctement, jQuery a les fonctions outerWidth et outerHeight qui comprennent le border et padding par défaut, et aussi le margin si le premier argument de la fonction est true

---

[Original réponse]

La méthode width ne nécessite plus le plugin dimensions, b omme il a été ajouté à la jQuery Core

Ce que vous devez faire est d'obtenir le rembourrage, la marge et les valeurs de largeur frontière de ce div particulier et les ajouter au résultat de la méthode width

Quelque chose comme ceci:

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 

divisé en plusieurs lignes pour le rendre plus lisible

de cette façon, vous obtiendrez toujours la valeur calculée correcte, même si vous ch ange Les valeurs de remplissage ou de marge de la css

Answer 2

Toute personne trébuchant autre sur cette réponse devrait noter que jQuery maintenant (> = 1.3) a outerHeight/outerWidth fonctions pour récupérer la largeur, y compris remplissage/bordures, par exemple

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

Pour inclure la marge ainsi, il suffit de passer true:

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

Answer 3

ressemble outerWidth est cassé dans la dernière version de jquery.

L'écart se produit lorsque

la div extérieure est flottante, la div intérieure a l'ensemble de la largeur (plus petite que la div externe) la div intérieure a style = "margin: auto"

Answer 4

même les navigateurs peuvent retourner des chaînes pour la largeur de la frontière, dans cette parseInt retourne NaN alors assurez-vous d'analyser la valeur int correctement.

 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 5

Juste pour la simplicité j'ai encapsulé la grande réponse d'Andreas Grech ci-dessus dans certaines fonctions. Pour ceux qui veulent un peu de couper-coller.

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