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 retourne 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, mais appeler .width () donne seulement 760, je serais difficile de voir comment.

Merci pour vos suggestions

Answer 1

[Mise à jour]

L'original de la réplique a été écrit avant jQuery 1.3, et les fonctions qui existaient au moment où elles ne sont pas suffisantes pour calculer la largeur.

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

---

[Réponse originale à cette question]

L' width méthode ne nécessite plus l' dimensions plugin, car il a été ajouté à l' jQuery Core

Ce que vous devez faire est d'obtenir la marge, la marge et la largeur de la bordure-les valeurs de la div et les ajouter à la suite de l' width méthode

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 bonne valeur calculée, même si vous modifiez le remplissage ou la marge des valeurs de la css

Answer 2

Quelqu'un d'autre qui trébuche sur cette réponse devrait noter que jQuery maintenant (> = 1.3) a outerHeight / outerWidth fonctions pour récupérer la largeur y compris padding / frontières, par exemple

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

Pour inclure également la marge, transmettez simplement true :

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

Answer 3

On dirait que outerWidth est cassé dans la dernière version de jquery.

L'écart se produit quand

la div externe est flottante, la div interne a la largeur définie (plus petite que la div externe) la div interne a style = "margin: auto"

Answer 4

Juste pour la simplicité j'ai encapsulé la grande réponse d'Andreas Grech ci-dessus dans quelques 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 5

mêmes navigateurs peuvent retourner la chaîne pour la largeur de la bordure, dans cette parseInt retourne NaN alors assurez-vous que vous analysez correctement la valeur en int.