Méthode innerWidth

La méthode innerWidth permet d'obtenir et de modifier la largeur d'un élément en tenant compte de ses marges intérieures. Il est important de se rappeler 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. La valeur de la largeur ne tient pas compte de l'épaisseur de la bordure de l'élément.

Syntaxe

Obtenir la largeur de l'élément. Dans certains cas, les valeurs obtenues peuvent être fractionnaires :

$(sélecteur).innerWidth();

Pour modifier la largeur de l'élément - vous pouvez passer simplement un nombre (par exemple 400), auquel cas les unités de mesure seront des pixels, ou une chaîne de caractères, en précisant les unités de mesure (par exemple '10em') :

$(sélecteur).innerWidth(nouvelle valeur);

Nous pouvons également appliquer une fonction donnée à chaque élément dans l'ensemble. Dans ce cas, le premier paramètre de la fonction recevra l'index de l'élément dans l'ensemble, et le second paramètre - la valeur actuelle de la largeur définie pour cet élément spécifique. La valeur 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).innerWidth(function(index dans l'ensemble, valeur actuelle de la largeur));

Exemple

Comparons et affichons les informations sur la largeur du paragraphe #test, obtenues par les méthodes width et innerWidth :

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Nous verrons une différence de 10px, ce qui correspond à la somme de nos marges intérieures gauche et droite.

Voir aussi

la méthode width,
qui permet d'obtenir et de modifier la largeur d'un élément
la méthode outerWidth,
qui permet d'obtenir et de modifier la largeur d'un élément, en tenant compte de ses marges et de sa bordure