jquery - jQuery 宽度返回像素而不是 %

Question

 <div class="ui-progress" style="width: 10%;">

 console.log($(this).width());

返回以像素为单位的宽度而不是 %。我如何获得百分比？

Answer 1

尝试这个：

var width = $('.ui-progress').width();
var parentWidth = $('.ui-progress').offsetParent().width();
var percent = 100*width/parentWidth;

或者

var width = ( 100 * parseFloat($('.ui-progress').css('width')) / parseFloat($('.ui-progress').parent().css('width')) ) + '%';

笔记

您可以使用.offsetParent()if parent of .ui-progresshas CSS position:absolute。

Answer 2

它返回以像素为单位的宽度，因为这就是浏览器解释百分比的方式。它可能在您的 CSS 中显示为百分比，但在浏览器显示时会变成像素值。

console.log($(this).attr("style"));

Answer 3

如果 div 被隐藏，您可以获得 % 。当 div 被隐藏时 $(selector).width() 返回百分比。

Answer 4

这是解决方案，

var xdom = $('.ui-progress')[0];
var percentWidth = xdom.style['width'];

或者

var percent_width=xdom.style.width;