Festlegen der Breite als Prozentsatz mit jQuery


85

Wie kann ich mit jQuery die Breite eines Div als Prozentsatz festlegen?

Antworten:


133

Verwenden der Breitenfunktion :

$('div#somediv').width('70%');

wird umkehren:

<div id="somediv" />

in:

<div id="somediv" style="width: 70%;"/>

3
Ich habe Breite in einer Variablen! Wie kann ich es auf% Breite schaffen?
Hemnath Mouli

2
@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");
Zorgatone

Ich habe ein Element mit einer Breite von 24%. Wenn Sie die Breite wie von Ihnen vorgeschlagen auf 11% einstellen, erhalte ich stattdessen eine Breite von 33%. Ich dachte, es würde die Breite zur vorhandenen Breite hinzufügen, aber wie Sie sehen können, ist 24 + 11 = 35 und nicht 33. Könnten Sie eine Idee haben, warum dies passiert?
Eugene

Ich weiß, dass dies ein alter Beitrag ist, aber ich bin gerade darauf gestoßen, da es das erste Ergebnis bei Google ist. Ich habe festgestellt, dass die Funktion css () etwas schneller ist als width (), vielleicht irre ich mich.
Dohab

1
Ich habe versucht, eine Breite mit festzulegen, .width("20%")aber das Element wurde immer wieder eingestellt width: 24%. Nach dem Durchsuchen der Dokumente stellt sich heraus, dass dies mit der CSS- box-sizingEigenschaft zusammenhängt. Durch .css({'width':"20%"})die Verwendung wird diese Einstellung vermieden.
Khartnett

14

Hemnath

Wenn Ihre Variable der Prozentsatz ist:

var myWidth = 70;
$('div#somediv').width(myWidth + '%');

Wenn Ihre Variable in Pixel angegeben ist und Sie den Prozentsatz des übergeordneten Elements angeben möchten:

var myWidth = 140;
var myPercentage = (myWidth / $('div#somediv').parent().width()) * 100;
$('div#somediv').width(myPercentage + '%');

13

Hier ist eine Alternative, die für mich funktioniert hat:

$('div#somediv').css({'width': '70%'});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.