javascript - 获取元素的 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 宽度(在本例中:200 像素)。我希望它以百分比 (50%) 的形式返回 div 的值。

提前致谢!

Answer 1

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

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