Detaillierte Erläuterung der Funktion jQuery.width()

Die Funktion width() wird verwendet, um die Breite des aktuell passenden Elements festzulegen oder zurückzugeben.

Der Breitenwert beinhaltet nicht die Breite des äußeren Randes(Rand), des inneren Randes(Abstand), des Randes usw. des Elements. Wie unten gezeigt:

jQuery-width-schematic-diagram.png

Wenn Sie die Breite einschließlich anderer Teile erhalten möchten, verwenden Sie bitte innerWidth() und äußereWidth(), Sie können hier klicken Schauen Sie sich die Unterschiede zwischen den drei an.

Diese Funktion gehört zum jQuery-Objekt (Instanz) und ist weiterhin für unsichtbare Elemente gültig.

Syntax

jQueryObject.width( [ value ] )

Hinweis:

1. Wenn der Wertparameter weggelassen wird, bedeutet dies, dass die Breite ermittelt wird. falls angegeben. Wenn dieser Parameter angegeben ist, bedeutet dies, dass die Breite festgelegt wird.

2. Die Operation „Einstellen“ der Funktion width() gilt für jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt; die Operation „Lesen“ gilt nur für das erste übereinstimmende Element.

Parameter

Parameterbeschreibung

Wert Optional/Zahlentyp wird zum Festlegen des Breitenwerts verwendet.

jQuery 1.4.1 Neue Unterstützung: Parameterwert kann eine Funktion sein, dann durchläuft width() die Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und diese in der Funktion zeigt auf das entsprechende DOM-Element.

width() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des aktuellen Elements im passenden Element und der zweite Parameter ist der aktuelle Breitenwert des Elements. Der Rückgabewert der Funktion ist der Breitenwert, der festgelegt werden muss.

Rückgabewert

Der Rückgabewert der width()-Funktion ist vom Typ jQuery/Number. Der Typ des Rückgabewerts hängt davon ab, ob die width()-Funktion gerade eine „Einstellung“ durchführt. Operation oder eine „Lese“-Operation.

Wenn die Funktion width() eine „Einstell“-Operation ausführt, gibt sie das aktuelle jQuery-Objekt selbst zurück; wenn es sich um eine „Lese“-Operation handelt, gibt sie den Breitenwert des ersten übereinstimmenden Elements zurück.

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt, verwendet die Funktion width() bei der Rückgabe der Breite nur das erste übereinstimmende Element unter ihnen. Wenn keine passenden Elemente vorhanden sind, wird null zurückgegeben.

Beispiel und Beschreibung

Die Funktion width() ähnelt css("width"), außer dass der Breitenwert von width() keine Einheit hat (die Einheit ist Pixel). .

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

Nehmen Sie den folgenden HTML-Code als Beispiel:

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

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung der width()-Funktion zu demonstrieren:

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 );

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktion jQuery.width(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!