jQuery动态改变多行文本框高度的方法

2019-11-20 09:03:05

字体：大中小

来源：转载

供稿：网友

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

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文本框高度变化</title><style type="text/css">* {  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;}</style><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(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    }  });});</script></head><body><form action="" method="post">  <div class="msg">    <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div>    <div>      <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>    </div>  </div></form></body></html>

运行效果图如下：