Méthode outerWidth

La méthode outerWidth permet d'obtenir et de modifier la largeur d'un élément en prenant en compte les marges intérieures, la bordure et sélectivement - les marges extérieures de l'élément. Il est important de se souvenir que nous obtiendrons la 'valeur calculée' de la largeur (computed width). Des erreurs de calcul peuvent également survenir si l'utilisateur modifie les dimensions de la page, ou si l'élément ou son parent sont masqués.

Syntaxe

Ainsi nous pouvons obtenir la largeur de l'élément. Cette méthode peut prendre un paramètre optionnel sous la forme de true ou false (false est la valeur par défaut), selon que les marges extérieures seront prises en compte ou non. Dans certains cas, les valeurs obtenues peuvent être fractionnaires :

$(sélecteur).outerWidth([incluant_margin]);

Pour modifier la largeur de l'élément - on peut passer simplement un nombre (par exemple 400), alors les unités de mesure seront en pixels, ou une chaîne de caractères, avec indication des unités de mesure (par exemple '10em') :

$(sélecteur).outerWidth(nouvelle valeur, [incluant_margin]);

Nous pouvons également appliquer une fonction définie à chaque élément dans le ensemble. Dans ce cas, le premier paramètre de la fonction recevra le numéro de l'élément dans le ensemble, et le second paramètre - la valeur actuelle de la largeur définie pour cet élément spécifique. this à l'intérieur de la fonction pointera vers l'élément courant. La valeur de la largeur de l'élément changera pour celle renvoyée par la fonction :

$(sélecteur).outerWidth(function(numéro dans le ensemble, valeur actuelle de la largeur));

Exemple

Comparons en affichant les informations sur la largeur du paragraphe #test, obtenue par les méthodes width, innerWidth et outerWidth :

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Voir aussi

la méthode width,
qui permet d'obtenir et de modifier la largeur d'un élément
la méthode innerWidth,
qui permet d'obtenir et de modifier la largeur d'un élément, en prenant en compte ses marges intérieures