FIDDLE

Question

我在.css文件中设置了min-height值。现在我想在20 px点击按钮时增加div的高度。

以下是我的css：

.wizard > .content{
    min-height:300px;
}

现在，每当我点击一个名为"increment"的按钮时，课程内容的min-height应增加20px。

<div class="wizard">
    <div class="content">
    </div>
    <div class="action">
    <button id="myButton" type="button">Increment</button>
    </div>
</div>

Answer 1

你可以这样：

$('#myButton').click(function(){
    $('.wizard .content').css({ 'min-height' : '+=20px' });
});

演示：http://jsfiddle.net/hoss/xtUPC/

Answer 2

使用height()获取当前身高，然后使用css()来应用身高

试试这个

$('#myButton').click(function(){
    var lastwidth=$('.content').height();
    var final=lastwidth+20
    $('.content').css('min-height',final+'px') 
});

DEMO

Answer 3

你可以通过在Jquery

中使用.css属性来实现这一目的

$('#myButton').on("click",function(){
        var height=$('.content').height();
        var newheight = height+20;
        $('.content').css('min-height',newheight+'px') 
    });

JQuery Doc

Answer 4

FIDDLE

  $( "button" ).on( "click", function() {
  $(".content" ).css( "height", "+=200" );
});

Answer 5

要匹配问题中的精确规格：

$( '#myButton' ).on( 'click', function() {

    var contentEl = $( '.wizard > .content' );
    var currentValue = parseInt( contentEl.css( 'min-height' ) );

    contentEl.css({
        'min-height': currentValue + 20 + 'px'
    });

});

我希望每按一次按钮动态增加我的div高度20 px

5 个答案:

FIDDLE