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

Dynamically change inline style value using jquery

本文关键字：样式 jquery 动态 使用      更新时间：2023-09-26

我正在尝试使用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>

我正在尝试用变量动态地增加进度条的宽度比如var amount:

style="width: var amount"

有人能帮我一下吗?

我会用.animate…见下文:

小提琴

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

您可以使用.css()获取/设置css样式值:

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

你可以使用。addclass和。removeclass分别添加和删除CSS类。

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

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

关于。css方法的更多信息。http://api.jquery.com/css/

$('#progress_bar').css({
   'background-color':'#FFF',
   'width': variable
});
相关文章：