从元素jQuery获取内联css宽度属性

Question

我有这样的元素：

<div class="progress xs" style="margin-bottom: 0px; height: 3px;">
    <div class="progress-bar progress-bar-green" style="width: 100%;"></div>   
</div>

我想获得内联css属性的宽度。

我试过这样做：

$(".progress").find(".progress-bar").css('width');

它应该返回'100%‘，但返回638px。

正如您在我的例子中所看到的：

​

console.log($(".progress").find(".progress-bar").css('width'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress xs" style="margin-bottom: 0px; height: 3px;">
    <div class="progress-bar progress-bar-green" style="width: 100%;"></div>   
</div>

​

有人知道如何获得progress-bar元素的progress-bar吗？

Answer 1

您可以直接访问元素的style属性以获得定义的宽度。

​

console.log($(".progress").find(".progress-bar").css('width'));
console.log($(".progress").find(".progress-bar")[0].style.width);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress xs" style="margin-bottom: 0px; height: 3px;">
  <div class="progress-bar progress-bar-green" style="width: 100%;"></div>
</div>

​