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


164

Comme dans le sujet, comment 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 .width()d' exécution sur mon 760px-wide, 10px paddingDIV retourne 760.

Peut-être que je fais quelque chose de mal, mais si mon élément se manifeste comme 780 pixels wideet Firebug me dit qu'il y 10px paddingen a, mais appeler .width()ne donne que 760, j'aurais du mal à voir comment.

Merci pour vos suggestions.

Réponses:


216

[Mettre à jour]

La réponse originale a été écrite avant jQuery 1.3, et les fonctions qui existaient à l'époque n'étaient pas suffisantes en elles-mêmes pour calculer toute la largeur.

Maintenant, comme JP l' indique correctement, jQuery a les fonctions externalWidth et outerHeight qui incluent le borderet paddingpar défaut, ainsi que marginsi le premier argument de la fonction esttrue


[Réponse originale]

La widthméthode ne nécessite plus le dimensionsplugin, car il a été ajouté aujQuery Core

Ce que vous devez faire est d'obtenir les valeurs de remplissage, de marge et de largeur de bordure de ce div particulier et de les ajouter au résultat de la widthméthode

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

Diviser 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 du css


3
En général, je préfère croire jQuery que de faire le calcul moi-même. Le problème est que la fonction width () ne spécifie pas réellement ce qu'elle fait en cas de "box-sizing: border-box". Je viens de le tester, et il renvoie la largeur intérieure sans le rembourrage, etc. Cela peut être correct ou non; différentes personnes peuvent s'attendre à des choses différentes. Ainsi, l'exemple de code ci-dessus fonctionne réellement, mais ce n'est peut-être pas le moyen le plus fiable. Comme indiqué dans d'autres réponses, je recommanderais plutôt d'utiliser la fonction outsideWidth (). Il promet au moins ce qu'il est censé faire dans la documentation.
Jan Zich

4
La fonction externalWidth / outerHeight n'existait pas lorsque j'ai écrit cette réponse.
Andreas Grech

Juste un petit commentaire sur mon ancien code, si quelqu'un l'utilise encore; le parseInts peut être changé en +opérateur pour rendre le code plus succinct. Donc, parseInt(theDiv.css("padding-left"), 10)pourrait être tourné vers +theDiv.css("padding-left")etc ...
Andreas Grech

182

Quiconque tombe sur cette réponse devrait noter que jQuery now (> = 1.3) a outerHeight/ outerWidthfonctions pour récupérer la largeur, y compris le remplissage / les bordures, par exemple

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

Pour inclure également la marge, passez simplement true:

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

3
Je n'ai pas de capacité d'édition, mais je changerais le premier commentaire en: // Renvoie la largeur + le remplissage + les bordures Et change le deuxième commentaire en // Renvoie la largeur + le rembourrage + les bordures + les marges
CtrlDot

2

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

L'écart se produit lorsque

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"


2

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

0

les mêmes navigateurs peuvent renvoyer une chaîne pour la largeur de la bordure, dans ce parseInt retournera NaN, alors assurez-vous d'analyser correctement la valeur int.

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

Merci d'avoir publié votre réponse! Veuillez lire attentivement la FAQ sur l'auto-promotion . Notez également qu'il est nécessaire que vous publiiez une clause de non-responsabilité chaque fois que vous créez un lien vers votre propre site / produit.
Andrew Barber
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.