java窗体修改行的高度,jQuery动态改变多行文本框高度的方法

本文实例讲述了jQuery动态改变多行文本框高度的方法。分享给大家供大家参考，具体如下：

文本框高度变化

* {

margin: 0;

padding: 0;

font: normal 12px/17px Arial;

}

.msg {

width: 300px;

margin: 100px;

}

.msg_caption {

width: 100%;

overflow: hidden;

margin-bottom: 1px;

}

.msg_caption span {

display: block;

float: left;

margin: 0 2px;

padding: 4px 10px;

background: #898989;

cursor: pointer;

color: white;

}

.msg textarea {

width: 300px;

height: 80px;

height: 100px;

border: 1px solid #000;

}

$(function(){

var $comment = $('#comment'); //获取评论框

$('.bigger').click(function(){ //放大按钮绑定单击事件

if( $comment.height() < 500 ){

$comment.height( $comment.height() + 50 ); //重新设置高度，在原有的基础上加50

}

})

$('.smaller').click(function(){ //缩小按钮绑定单击事件

if( $comment.height() > 50 ){

$comment.height( $comment.height() - 50 ); //重新设置高度，在原有的基础上减50

}

});

});

放大 缩小

多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.

运行效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。