Méthode width

La méthode width permet d'obtenir et de modifier la largeur d'un élément. Il est important de se souvenir que nous obtiendrons la 'valeur calculée' de la largeur (computed width). Contrairement à la méthode css('width'), elle retourne une valeur sans unité (par exemple 400) et est pratique pour les calculs mathématiques. La méthode obtient la largeur du contenu de l'élément, indépendamment de la définition de la propriété CSS box-sizing. Pour éviter les inconvénients liés à cela, il est recommandé d'utiliser css('width'). Des erreurs de calcul peuvent également survenir si l'utilisateur change la taille de la page, ou aussi si l'élément ou son parent sont masqués. La valeur de la largeur ne prend pas en compte les valeurs des marges intérieures et de la bordure.

Syntaxe

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

$(sélecteur).width();

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

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

Nous pouvons également appliquer une fonction donnée à 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 deuxième 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 que retourne la fonction :

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

Exemple

Lorsqu'on clique sur le div, changeons sa largeur pour la valeur 40px, en utilisant la méthode width, et aussi à l'aide de css changeons son fond en vert :

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Voir aussi

la méthode height,
qui permet d'obtenir et de modifier la hauteur d'un élément
la méthode innerWidth,
qui permet d'obtenir et de modifier la largeur d'un élément, en tenant compte de ses marges intérieures
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
la méthode css,
qui permet d'obtenir et de modifier les styles CSS d'un élément