Javascript 使用jquery动态更改内联样式值

我正在尝试使用jquery动态更改内联样式值

我的html代码：

<div class="progress progress-striped active" style="margin-bottom:1px;">
    <div id="progress_bar" class="bar bar-success" style="width: 50%"></div>
</div>

有人能帮我一点忙吗？

您可以使用

.css（）

获取/设置css样式值：

$('#progress_bar').css('width' , 'value_here');

---

我会使用

.animate

。。。见下文：

---

您可以使用.addClass和.removeClass分别添加和删除CSS类

$( "progress_bar" ).addClass( "classWithNewCSS" );

$( "progress_bar" ).removeClass( "classWithNewCSS" );

---

因此，它会实时添加和删除此CSS，并应用相应的更改。

有关.CSS方法的更多信息。

$("#but").click(function(){ 
    var yourValue = "50%"
      $('.progressbar').animate({ width: yourValue }, 10000);
});

$( "progress_bar" ).addClass( "classWithNewCSS" );

$( "progress_bar" ).removeClass( "classWithNewCSS" );

$('#progress_bar').css({
   'background-color':'#FFF',
   'width': variable
});