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

【问题标题】：get css width of an element and convert it to percentage获取元素的css宽度并将其转换为百分比
【发布时间】：2014-06-21 04:07:48
【问题描述】：

我有这个代码：

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 的值。

提前致谢！

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这个问题已经回答here

你必须自己实现它：

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

【讨论】：