Get inline css width property from element jQuery

Question

I have this element:

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

I want to get the inline css property width.

I tried to do this:

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

Which should return '100%' but returns 638px instead.
As you can see in my example :

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>

Does anyone know how to get the 100% of the progress-bar element?

See the second answer in the duplicate I marked: https://stackoverflow.com/a/10432934/519413 — Rory McCrossan, Sep 04 '19 at 10:02

score 6 · Accepted Answer · answered Sep 04 '19 at 10:01

6

You can directly access the style property of the element to get the defined width.

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>

answered Sep 04 '19 at 10:01

Nidhin Joseph

9,981
4
26
48

Ah great thanks that `[0]` did it, I already tried to do something like that but never knew `[0]` has to be before that – Webdeveloper_Jelle Sep 04 '19 at 10:03
@Enthu its already answered and accepted. – Nidhin Joseph Sep 04 '19 at 21:11
@NidhinJoseph , hi , I have commented , it is not working fine for more than one box , I have commented in the last, please help – Enthu Sep 05 '19 at 04:36

Get inline css width property from element jQuery

1 Answers1