使用jQuery将宽度设置为百分比

如何使用jQuery将div的宽度设置为百分比？

jquery width

— 普拉萨德
source

Answers:

133

使用宽度功能：

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

将转向：

<div id="somediv" />

变成：

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

— 达林·迪米特罗夫（Darin Dimitrov）
source

我得到一个变量的宽度！我如何使其达到％width？

— hemnath mouli 2015年

@hemnathmouli jQuery（“ div＃somediv”）。width（myvar +“％”）;

— Zorgatone

我有一个宽度为24％的元素，将您建议的宽度设置为11％可以使我的宽度为33％。我以为是将宽度添加到现有宽度上，但是您可以看到24 + 11 = 35而不是33。您能对为什么发生这种情况有任何想法吗？

— 尤金（Eugene）

我知道这是一篇旧文章，但由于它是google的第一个结果，所以我碰到了。我注意到css（）函数比width（）快一点，也许我错了。

— 多哈卜'18

我试图使用设置宽度，.width("20%")但是该元素一直设置为width: 24%。在浏览了文档之后，事实证明这与CSSbox-sizing属性有关。使用.css({'width':"20%"})将避免此调整。

— khartnett

半身人

如果您的变量是百分比：

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

如果您的变量以像素为单位，并且您希望它占父级的百分比：

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

— 乔纳森·埃尔德
source

这是对我有用的替代方法：

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

— joaorodr84
source