Explication détaillée de la fonction jQuery.width()

La fonction width() est utilisée pour définir ou renvoyer la largeur de l'élément correspondant actuel.

La valeur de largeur n'inclut pas la largeur de la marge extérieure(marge), de la marge intérieure(remplissage), de la bordure, etc. Comme indiqué ci-dessous :

jQuery-width-schematic-diagram.png

Si vous souhaitez obtenir la largeur incluant d'autres parties, veuillez utiliser innerWidth() et externalWidth(), vous pouvez cliquer ici Découvrez les différences entre les trois.

Cette fonction appartient à l'objet (instance) jQuery et est toujours valable pour les éléments invisibles.

Syntaxe

jQueryObject.width( [ value ] )

Remarque :

1. Si le paramètre value est omis, cela signifie obtenir la largeur ; si spécifié Si ce paramètre est spécifié, cela signifie définir la largeur.

2. L'opération de "réglage" de la fonction width() concerne chaque élément correspondant à l'objet jQuery actuel ; l'opération de "lecture" concerne uniquement le premier élément correspondant.

Paramètre

Description du paramètre

valeur Le type facultatif/numéro est utilisé pour définir la valeur de largeur.

jQuery 1.4.1 Nouveau support : la valeur du paramètre peut être une fonction, puis width() traversera et exécutera la fonction en fonction de tous les éléments correspondants, et ceci dans la fonction pointera vers l'élément DOM correspondant.

width() transmettra également deux paramètres à la fonction : le premier paramètre est l'index de l'élément actuel dans l'élément correspondant, et le deuxième paramètre est la valeur de largeur actuelle de l'élément. La valeur de retour de la fonction est la valeur de largeur qui doit être définie.

Valeur de retour

La valeur de retour de la fonction width() est de type jQuery/Number. Le type de valeur de retour dépend si la fonction width() effectue actuellement un "réglage". opération ou une opération de « lecture ».

Si la fonction width() effectue une opération de « réglage », elle renvoie lui-même l'objet jQuery actuel ; s'il s'agit d'une opération de « lecture », elle renvoie la valeur de largeur du premier élément correspondant.

Si l'objet jQuery actuel correspond à plusieurs éléments, lors du renvoi de la largeur, la fonction width() utilise uniquement le premier élément correspondant parmi eux. S'il n'y a aucun élément correspondant, null est renvoyé.

Exemple et description

La fonction width() est similaire à css("width"), sauf que la valeur de largeur de width() n'a pas d'unité (l'unité est le pixel). .

$(element).width(); // 返回数字，例如：80
$(element).css("width"); // 返回字符串，例如："80px"

Prenons le code HTML suivant comme exemple :

<div id="n1" style="padding: 10px; width: 100px; height:100px; background: #eee;"></div>
<div id="n2" style="width: 200px; height:100px; background: #999;"></div>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction width() :

var $n1 = $("#n1");
var $n2 = $("#n2");
document.writeln( $n1.width() ); // 100
document.writeln( $n2.width() ); // 200
var $divs = $("div");
// 如果匹配多个元素，只返回第一个元素的width
document.writeln( $divs.width() ); // 100
// 设置所有div元素的width不能小于300px(小于300的设为300，其它保持不变)
$divs.width( function(index, width){
    return Math.max(width, 300);
} );
// 设置n1的width为20px
$n1.width( 20 );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!