jQuery width() Methode

jQuery HTML/CSS Methoden

Die width()-Methode liest oder setzt die Breite des ausgewählten Elements.

Wenn die width()-Methode verwendet wirdErhaltenWenn die Breite gesetzt wird, wirdDas erste ausgewählte ElementBreite.

Wenn die width()-Methode verwendet wirdSetzenWenn die Breite gesetzt wird, wirdAlle ausgewählten ElementeBreite.

Wie im folgenden Bild gezeigt, enthält die width()-Methode keine Füllung, Rahmen oder Abstände:

Die Breitenwerte können auch relativ sein. Wenn ein Wert mit einem führenden+=oder-=Zeichenfolge, dann wird die Zielbreite berechnet, indem von der aktuellen Wertzahl die angegebene Zahl hinzu- oder abgezogen wird (z.B. width("-= 250））。

Syntax:

Erhalten Sie die Breite:

$(selector).width()

Stellen Sie die Breite ein:

$(selector).width(value)

Stellen Sie die Breite mit einer Funktion ein:

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

Beispiel

Erhalten Sie die Breite des DIV-Elements:

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

Stellen Sie die Breite aller Absätze ein:

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

Stellen Sie die Breite aller Absätze mit verschiedenen Einheiten ein:

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

Klicken Sie auf die Schaltfläche, um die Breite aller Absätze zu verringern (verwenden Sie die Funktion):

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

Die width()-Methode kann auch die Breite des Fensters und des Dokuments finden:

$(window).width();//　Gibt die Breite des Browser-Fensters zurück
$(document).width();　　//Gibt die Breite des HTML-Dokuments zurück

Zeige die Unterschiede zwischen width(), height(), innerHeight(), innerWidth(), outerWidth() und outerHeight():

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

Parameterwert

jQuery HTML/CSS Methoden