获取元素的css宽度并将其转换为百分比

Question

我有这段代码：

HTML

<div class="bar-value"></div>

CSS

.bar-value{
    width: 50%;
    height: 28px;
    background: #8BBDE8;
}

JQUERY

$(document).ready(function(){
    var percent = $('.bar-value').css('width');
});

问题是这会返回div的宽度（以像素为单位）（在这种情况下：200px）。我想要以百分比（50％）返回div的值。

提前致谢！

Answer 1

要获得百分比，您需要它的父级宽度。试试这个：

$(document).ready(function(){
    var element = $('.bar-value');
    var percent = element.css('width')/element.parent().width()*100+'%';
});

Answer 2

此问题已经回答here

您必须自己实施：

var width = $('.bar-value').css('width');
var parentWidth = $('.bar-value').offsetParent().css('width');
var percent = 100*width/parentWidth;