How would i use Jquery to select inline property width value

Question

I'm having difficulty in selecting the "style=:width: 10%" value in jquery for progressbar element in bootstrap.

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> <span class="sr-only">0% Complete</span> </div>

This is what I have tried so far, $(".progress-bar[style*=width]"); but it returns the entire div.

My goal is to target that value and change it via Ajax.

Here is a jsfiddle boilerplate for your reference.

Thanks

How exactly would you target a value, and change it with ajax, the code you've posted is supposed to return the entire element ? — adeneo
– adeneo, Commented Jan 3, 2016 at 17:21

Taplar · Accepted Answer · 2016-01-03 17:26:13Z

2

Use a filter instead. Try not to use attributes(other than id and class) as selectors.

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">

SCRIPT:

$('.progress-bar').filter(function(){ return $(this).css('width') === "10%"; });

http://learn.jquery.com/using-jquery-core/selecting-elements/ has some notes about this mentioning concerns with certain selectors being potentially slower. Something worth reviewing.

edited Jan 3, 2016 at 17:26

answered Jan 3, 2016 at 17:21

Taplar

25k4 gold badges24 silver badges36 bronze badges

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

Comments

Ibrahim Khan · Accepted Answer · 2016-01-03 17:27:35Z

1

Try like following.

Get width

var width = $(".progress-bar")[0].style.width;

Set width

$(".progress-bar")[0].style.width = '90%';

edited Jan 3, 2016 at 17:27

answered Jan 3, 2016 at 17:19

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

How would i use Jquery to select inline property width value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related