Question

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

有人可以帮我一点吗？

Answer 1

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

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

Answer 2

我会使用.animate ...见下文：

FIDDLE

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

Answer 3

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

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

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

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

Answer 4

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

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

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

4 个答案: