Festlegen der Breite als Prozentsatz mit jQuery

85

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

jquery width Prasad
quelle

Antworten:

133

Verwenden der Breitenfunktion :

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

wird umkehren:

<div id="somediv" />

in:

<div id="somediv" style="width: 70%;"/>
Darin Dimitrov
quelle
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 + '%');
Jonathan Elder
quelle
13

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

$('div#somediv').css({'width': '70%'});
joaorodr84
quelle