web-dev-qa-db-fra.com

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

Comme dans le sujet, comment obtenir la largeur totale d'un élément, y compris sa bordure et son remplissage, à l'aide de jQuery? J'ai le plugin jQuery Dimensions, et l'exécution de .width () sur mon DIV de remplissage de 760px, 10px, renvoie 760.

Peut-être que je fais quelque chose de mal, mais si mon élément se manifeste par une largeur de 780 pixels et que Firebug me dit qu'il contient un remplissage de 10 pixels, mais que l'appel de .width () ne donne que 760 pixels, je ne saurais trop comment.

Merci pour toutes les suggestions.

jquerydimensions
162
tags2k

[Mise à jour]

La réponse originale avait été écrite avant jQuery 1.3 et les fonctions qui existaient à l’époque n’étaient pas suffisantes pour calculer toute la largeur.

Maintenant, comme JP indique correctement, jQuery a les fonctions outerWidth et outerHeight qui incluent les border et padding par défaut, ainsi que margin si le premier argument de la fonction est true

[réponse originale]

La méthode width ne nécessite plus le plug-in dimensions, car elle a été ajoutée à jQuery Core

Ce que vous devez faire, c'est obtenir les valeurs de remplissage, de marge et de largeur de bordure de cette div particulière et les ajouter au résultat de la méthode width.

Quelque chose comme ça:

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 modifiez les valeurs de remplissage ou de marge à partir du fichier css.

216
Andreas Grech

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

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

Pour inclure également la marge, il suffit de passer true:

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

Juste pour simplifier, j’ai résumé la bonne réponse d’Andreas Grech ci-dessus dans certaines fonctions. Pour ceux qui veulent un peu de bonheur copier-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;
}
2
bladnman

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

La différence se produit lorsque

la div externe est flottante, la div interne a la largeur définie (inférieure à la div externe) la div interne a un style = "margin: auto"

2
Booker

les mêmes navigateurs peuvent renvoyer une chaîne de caractères pour la largeur de la bordure. Dans cet article syntaxique, parseInt renvoie NaN. Assurez-vous donc que vous analysez 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"));
0
Cherven
$(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>
0
user1798002