如何使用 jQuery 以百分比形式获取 div 的宽度？ [复制]答案

【问题标题】：How to get width of a div in percentage using jQuery? [duplicate]如何使用 jQuery 以百分比形式获取 div 的宽度？ [复制]
【发布时间】：2013-09-18 02:52:38
【问题描述】：

我有一个 div，我想知道是否有办法使用 jQuery 获取它的宽度百分比。

这是我的代码：

$(document).ready(function(){
   var f = $('.f').width();
      alert(f);    
});

我尝试使用% 作为width(%) 之类的参数，但这是将宽度设置为%，而不是以百分比格式获取值。有人可以告诉我应该怎么做才能获得百分比吗？

非常感谢任何帮助。

Fiddle

【问题讨论】：

宽度仅以像素为单位的绝对值给出。要将其转换为%，您需要获取父元素的宽度并进行一些数学运算。

标签： jquery

【解决方案1】：

要使用您的示例代码...

$(document).ready(function(){
   var f = $(".f").width() / $('.f').parent().width() * 100;
   alert(f);    
});

Working jsfiddle...

【讨论】：

+1 此版本用于parent()，对选择器进行硬编码。
任何努力计算有边框的元素宽度的人：将parseFloat($('.f').css('border-width')) * 2添加到分区左侧的元素宽度
@BrunoPeres 改为查看 jquery 的方法outerWidth()。

【解决方案2】：

如果你想要相对于身体的宽度：

var percent =  $('.f').width() / $('body').width() * 100;

console.log(Math.round(percent).toFixed(2));

这是你要求的吗？

http://jsfiddle.net/aXRxP/5/

【讨论】：

【解决方案3】：

您将需要获取视口宽度，然后根据视口宽度计算您的元素宽度百分比。

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width(); // this will return parent element's width which also can be replaced with docuent to get viewport width
var percent = 100*width/parentWidth;

【讨论】：

【解决方案4】：

$(document).ready(function(){
   var f = $('.f').width();
    var pw = $('.f').parent().width();
    var rate = (f/pw*100) + '%';
    $('.f').html( rate);    
});

它是父项的。因此，如果您将 .f div 的宽度评定为父项的宽度，您将得到该值。

【讨论】：