Get inline css width property from element jQuery [duplicate]

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: stackoverflow.com/a/10432934/519413 — Rory McCrossan
– Rory McCrossan, Commented Sep 4, 2019 at 10:02

Nidhin Joseph · Accepted Answer · 2019-09-04 10:01:23Z

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 4, 2019 at 10:01

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Webdeveloper_Jelle Over a year ago

Ah great thanks that [0] did it, I already tried to do something like that but never knew [0] has to be before that

Nidhin Joseph Over a year ago

@Enthu its already answered and accepted.

Enthu Over a year ago

@NidhinJoseph , hi , I have commented , it is not working fine for more than one box , I have commented in the last, please help

Collectives™ on Stack Overflow

Get inline css width property from element jQuery [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related