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

Posted 2023-03-06

【中文标题】使用 jQuery 将宽度设置为百分比

【英文标题】：Setting width as a percentage using 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%');