Ustawianie szerokości jako wartości procentowej za pomocą jQuery

85

Jak ustawić szerokość elementu div jako wartość procentową za pomocą jQuery?

Prasad
źródło

Odpowiedzi:

133

Korzystanie z funkcji szerokości :

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

zmieni się:

<div id="somediv" />

w:

<div id="somediv" style="width: 70%;"/>
Darin Dimitrov
źródło
3
mam szerokość w zmiennej! Jak mogę ustawić to do% szerokości?
hemnath mouli
2
@hemnathmouli jQuery ("div # somediv"). width (myvar + "%");
Zorgatone
Mam element o szerokości 24%, ustawienie szerokości, jak sugerujesz na 11%, daje mi szerokość 33%. Myślałem, że chodzi o dodanie szerokości do istniejącej szerokości, ale jak widać 24 + 11 = 35, a nie 33. Czy możesz mieć jakieś pojęcie, dlaczego tak się dzieje?
Eugene
Wiem, że to stary post, ale właśnie go natknąłem, bo to pierwszy wynik w Google. Zauważyłem, że funkcja css () jest trochę szybsza niż width (), może się mylę.
Dohab
1
Próbowałem ustawić szerokość, .width("20%")ale element był ustawiany width: 24%. Po przejrzeniu dokumentacji okazuje się, że jest to związane z box-sizingwłaściwością CSS . Użycie .css({'width':"20%"})pozwoli uniknąć takiej regulacji.
khartnett
14

Hemnath

Jeśli zmienną jest procent:

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

Jeśli zmienna jest w pikselach i chcesz, aby wartość procentowa zajmowała element nadrzędny:

var myWidth = 140;
var myPercentage = (myWidth / $('div#somediv').parent().width()) * 100;
$('div#somediv').width(myPercentage + '%');
Jonathan Elder
źródło
13

Oto alternatywa, która zadziałała dla mnie:

$('div#somediv').css({'width': '70%'});
joaorodr84
źródło