Méthode width() de jQuery

HTML de jQuery/Méthodes CSS

La méthode width() de jQuery permet de获取 ou de définir la largeur de l'élément sélectionné.

Lorsque vous utilisez la méthode width(),ObtenezLorsque vous définissez la largeur, il retourneLe premier élément sélectionnéde largeur.

Lorsque vous utilisez la méthode width(),DéfinissezLorsque vous définissez la largeur, il définitTous les éléments sélectionnésde largeur.

Comme indiqué dans l'image suivante, la méthode width() ne contient pas de remplissage, de bordure ou de marge:

La valeur de la largeur peut également être relative. Si un préfixe est fourni pour la valeur:+=-Si une séquence de caractères = est fournie, le largeur cible est calculée en ajoutant ou en soustrayant le nombre donné à la valeur actuelle (par exemple width(-= 250”）。

Syntaxe:

Obtenez la largeur:

$(selector).width()

Définissez la largeur:

$(selector).width(value)

Définissez la largeur en utilisant une fonction:

$(selector).width(function(index, currentWidth))

Exemple

Obtenez la largeur de l'élément DIV:

$("div").click(function(){
　　$(this).width();
});

Définissez la largeur de tous les paragraphes:

$("button").click(function(){
　　$("p").width(250);
});

Définissez la largeur de tous les paragraphes avec des unités différentes:

$("#btn1").click(function(){
　　$("p").width(250);
});
$("#btn2").click(function(){
　　$("p").width("7em");
});
$("#btn3").click(function(){
　　$("p").width("100vw");
});

Réduisez la largeur de tous les paragraphes au clic du bouton (utilisez la fonction):

$("button").click(function(){
　　$("p").width(function(i, val){
　　　　　　　　return val　-　50;
　　});
});

La méthode width() peut également trouver la largeur de la fenêtre et du document:

$(window).width();//　Retournez la largeur de la fenêtre du navigateur
$(document).width();　　//Retournez la largeur du document HTML

Affichez les différences entre width(), height(), innerHeight(), innerWidth(), outerWidth() et outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Valeur du paramètre

HTML de jQuery/Méthodes CSS