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>

運行效果圖如下：