Copying element's style width attribute to another element

Question

I have a progress bar that is outputted from a webapp program like this:

<div id="diskUsageProgressBar">
    <div class="green-bar" style=" width: 1%;">
    </div>
</div>

And I have added to the page a much nicer bar like this:

<div class="progress xs">
    <div class="progress-bar progress-bar-red diskusgbar" style="width: 1%;"></div>
</div>

How could I use javascript (or JQuery) to copy the width value from the first one and paste it into the second one on page load?

Thanks for the help!

Why not just apply your classes to the progress bar that's already there? — robertc, May 29 '14 at 10:47
I don't have control of the web app's own programming, so I have to work around it... — Matthew Stratford, May 29 '14 at 12:27
You don't need the web app's own programming, you just need to change what classes are applied to its output with jQuery. eg. `$('#diskUsageProgressBar').addClass('progress xs');` — robertc, May 29 '14 at 12:40
I understand, but I'm kinda doing something really complicated so it's not the best option for me :) — Matthew Stratford, May 29 '14 at 13:26

score 1 · Accepted Answer · answered May 29 '14 at 10:47

1

jQuery javascript:

$('.progress.xss .diskusgbar').css('width', 
    $('#diskUsageProgressBar .green-bar').css('width')
);

answered May 29 '14 at 10:47

Rob Schmuecker

8,934
2
18
34

jQuery **is** javascript – Amit Joki May 29 '14 at 10:48
1

Yes I know that! :) But it is also a subset of javascript, so my code will only work if jQuery is included. – Rob Schmuecker May 29 '14 at 10:52

score 0 · Answer 2 · answered May 29 '14 at 10:46

0

Like this:

$(function(){
   $('.progress-bar-red').attr('style',$('.green-bar').attr('style'));  
})

answered May 29 '14 at 10:46

Amit Joki

58,320
7
77
95

score 0 · Answer 3 · answered May 29 '14 at 10:47

0

If you want to only copy the width then you can use native .width() method of jquery to get/set value:

$('.progress-bar').width($('.green-bar').width());

answered May 29 '14 at 10:47

Milind Anantwar

81,290
25
94
125

score 0 · Answer 4 · answered May 29 '14 at 10:49

0

use this

$('.progress-bar').width($('.green-bar').width());

answered May 29 '14 at 10:49

mayank chaturvedi

172
1
8

score 0 · Answer 5 · edited May 23 '17 at 11:50

First, as said in Is it possible to listen to a "style change" event?

(function() {
var ev = new $.Event('style'),
    orig = $.fn.css;
$.fn.css = function() {
    orig.apply(this, arguments);
    $(this).trigger(ev);
}
})();

And then bind it:

$('#diskUsageProgressBar > .green-bar').bind('style', function(e) {
 $('.progress.xs > .diskusgbar').css('width', 
  $('#diskUsageProgressBar > .green-bar').css('width')
 );
});

Hope it works. Maybe tricky and not so symple if the first bar is in another iframe.

Copying element's style width attribute to another element

5 Answers5