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

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

jquery width

— Prasad
źródło

Odpowiedzi:

133

Korzystanie z funkcji szerokości :

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

zmieni się:

<div id="somediv" />

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

— Darin Dimitrov
źródło

mam szerokość w zmiennej! Jak mogę ustawić to do% szerokości?

— hemnath mouli

@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

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

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

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

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

— joaorodr84
źródło