Methode width

Die Methode width ermöglicht es, die Breite eines Elements abzurufen und zu ändern. Es ist wichtig, sich daran zu erinnern, dass wir den 'berechneten Wert' der Breite (computed width) erhalten. Im Gegensatz zur Methode css('width') gibt sie einen dimensionslosen Wert zurück (z. B. 400) und ist für mathematische Berechnungen praktisch. Die Methode erhält die Breite des Inhalts des Elements, unabhängig von der Angabe der CSS-Eigenschaft box-sizing. Um Unannehmlichkeiten diesbezüglich zu vermeiden, wird empfohlen, css('width') zu verwenden. Berechnungsfehler können auch auftreten, wenn der Benutzer die Seitengröße ändert, oder wenn das Element oder sein Elternelement ausgeblendet sind. Der Breitenwert berücksichtigt keine Padding- oder Rahmenwerte.

Syntax

Breite eines Elements abrufen. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selector).width();

Um die Breite eines Elements zu ändern - kann einfach eine Zahl übergeben werden (z. B. 400), dann ist die Maßeinheit Pixel, oder ein String mit Angabe der Maßeinheit (z. B. '10em'):

$(Selector).width(neuer Wert);

Wir können auch eine bestimmte Funktion auf jedes Element im Set anwenden. Dabei erhält die Funktion als ersten Parameter den Index des Elements im Set und als zweiten Parameter - den aktuellen Wert der festgelegten Breite für das jeweilige Element. Der Wert this innerhalb der Funktion zeigt auf das aktuelle Element. Der Breitenwert des Elements ändert sich auf den Wert, den die Funktion zurückgibt:

$(Selector).width(function(Index im Set, aktueller Breitenwert));

Beispiel

Lassen Sie uns beim Klicken auf div dessen Breite auf den Wert 40px ändern, indem wir die Methode width verwenden, und gleichzeitig mit css dessen Hintergrund auf grün ändern:

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

Siehe auch

Methode height,
die es ermöglicht, die Höhe eines Elements abzurufen und zu ändern
Methode innerWidth,
die es ermöglicht, die Breite eines Elements abzurufen und zu ändern, einschließlich seines inneren Paddings
Methode outerWidth,
die es ermöglicht, die Breite eines Elements abzurufen und zu ändern, einschließlich seines Paddings und Rahmens
Methode css,
die es ermöglicht, CSS-Stile eines Elements abzurufen und zu ändern