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

【问题标题】：Setting width as a percentage using jQuery使用 jQuery 将宽度设置为百分比
【发布时间】：2011-01-08 14:56:38
【问题描述】：

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

【问题讨论】：

【解决方案1】：

使用width函数：

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

会转：

<div id="somediv" />

进入：

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

【讨论】：

我在一个变量中得到了宽度！我怎样才能使它达到 %width？？
@hemnathmouli jQuery("div#somediv").width(myvar + "%");
我有一个宽度为 24% 的元素，将您建议的宽度设置为 11% 给了我 33% 的宽度。我认为这是将宽度添加到现有宽度，但您可以看到 24 + 11 = 35 而不是 33。您知道为什么会发生这种情况吗？
我知道这是一篇旧帖子，但我只是碰到它，因为它是谷歌上的第一个结果。我注意到 css() 函数比 width() 快一点，也许我错了。
我尝试使用.width("20%") 设置宽度，但该元素一直设置为width: 24%。深入研究文档后，发现这与 CSS box-sizing 属性有关。使用.css({'width':"20%"}) 可以避免这种调整。

【解决方案2】：

赫姆纳斯

如果你的变量是百分比：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：