Question

我有一个从这样的webapp程序输出的进度条：

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

我在网页上添加了一个更好的栏：

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

我如何使用javascript（或JQuery）从第一个中复制宽度值并在页面加载时将其粘贴到第二个？

感谢您的帮助！

Answer 1

jQuery javascript：

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

Answer 2

像这样：

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

Answer 3

如果您只想复制宽度，那么您可以使用jquery的本地.width()方法来获取/设置值：

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

Answer 4

使用此

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

Answer 5

首先，如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);
}
})();

然后绑定它：

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

希望它有效。如果第一个栏位于另一个iframe中，也许很棘手而且不那么简单。

将元素的样式宽度属性复制到另一个元素

5 个答案: