jQuery width() Methode

❮ jQuery HTML/CSS-Methoden

Beispiel

Gibt die Breite eines <div>-Elements zurück:

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

Definition und Verwendung

Die Methode width() legt die Breite der ausgewählten Elemente fest oder gibt sie zurück.

Wenn diese Methode verwendet wird, um die Breite zurückzugeben, gibt sie die Breite des ERSTEN übereinstimmenden Elements zurück.

Wenn diese Methode zum Festlegen der Breite verwendet wird, wird die Breite ALLER übereinstimmenden Elemente festgelegt.

Wie das Bild unten zeigt, enthält diese Methode keine Auffüllung, Rahmen oder Ränder.

jQuery-Dimensionen


Verwandte Methoden:

  • height() - Legt die Höhe eines Elements fest oder gibt sie zurück
  • innerWidth() - Gibt die Breite eines Elements zurück (einschließlich Padding)
  • innerHeight() - Gibt die Höhe eines Elements zurück (einschließlich Padding)
  • outerWidth() - Gibt die Breite eines Elements zurück (einschließlich Polsterung und Rahmen).
  • outerHeight() – Gibt die Höhe eines Elements zurück (einschließlich Polsterung und Rahmen).


Syntax

Geben Sie die Breite zurück:

$(selector).width()

Stellen Sie die Breite ein:

$(selector).width(value)

Stellen Sie die Breite mit einer Funktion ein:

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

Parameter Description
value Required for setting width. Specifies the width in px, em, pt, etc. Default unit is px
function(index,currentwidth) Optional. Specifies a function that returns the new width of selected elements
  • index - Returns the index position of the element in the set
  • currentwidth - Returns the current width of the selected element

Probieren Sie es selbst aus - Beispiele


fest So legen Sie die Breite eines Elements mit verschiedenen Einheiten fest.


So verwenden Sie eine Funktion, um die Breite eines Elements zu verringern.


zurückgeben So geben Sie die aktuelle Breite des Dokuments und der Fensterelemente zurück.


Verwendung von width(), height(), innerHeight(), innerWidth(), outerWidth() und outerHeight().


So ändern Sie die Hintergrundfarbe der Seite auf kleineren Bildschirmen.


❮ jQuery HTML/CSS-Methoden