JQuery kullanarak genişliği yüzde olarak ayarlama


87

JQuery kullanarak bir div'in genişliğini yüzde olarak nasıl ayarlayabilirim?

Yanıtlar:


135

Kullanma genişliği fonksiyonu:

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

dönecek:

<div id="somediv" />

içine:

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

3
bir değişkende genişlik var! Nasıl% genişliğe kadar yapabilirim?
— hemnath mouli

2
@hemnathmouli jQuery ("div # somediv"). genişlik (myvar + "%");
— Zorgatone

Genişliği% 24 olan bir elemanım var, önerdiğiniz gibi genişliği% 11 olarak ayarlamak bana bunun yerine% 33'lük bir genişlik veriyor. Genişliği mevcut genişliğe eklediğini sanıyordum ama gördüğünüz gibi 33 değil 24 + 11 = 35. Bunun neden olduğuna dair bir fikriniz var mı?
— Eugene

Bunun eski bir gönderi olduğunu biliyorum, ancak google'daki ilk sonuç olduğu için onunla karşılaştım. Css () işlevinin width () den biraz daha hızlı olduğunu fark ettim, belki yanılıyorum.
— Dohab

1
.width("20%")Öğe ayarlanmaya devam ederken kullanarak bir genişlik ayarlamaya çalışıyordum width: 24%. Dokümanları inceledikten sonra, bunun CSS box-sizingözelliğiyle ilgili olduğu ortaya çıkıyor . Kullanmak .css({'width':"20%"})bu ayarlamayı önleyecektir.
— khartnett

14

Hemnath

Değişkeniniz yüzde ise:

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

Değişkeniniz piksel cinsindeyse ve üst öğeden aldığı yüzdeyi istiyorsanız:

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

13

İşte benim için çalışan bir alternatif:

$('div#somediv').css({'width': '70%'});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.