Question

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

这是我的代码：

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

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

任何帮助都非常受欢迎。

Fiddle

Answer 1

使用您的示例代码...

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

Working jsfiddle...

Answer 2

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

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

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

这是你要求的吗？

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

Answer 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;

Answer 4

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

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

如何使用jQuery获取div的宽度百分比？

4 个答案: