jQuery動態(tài)改變多行文本框高度的操作方法

2024-05-06 15:45:49

字體：大中小

供稿：網(wǎng)友

jQuery動態(tài)改變多行文本框高度的操作方法，大家都知道嗎？其實我們可以通過程序動態(tài)添加文本框的高度，那么，就隨錯新技術(shù)頻道小編一起來看看吧！

分享給大家供大家參考，具體如下：

<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 ); //重新設(shè)置高度，在原有的基礎(chǔ)上加50    }  })  $('.smaller').click(function(){ //縮小按鈕綁定單擊事件    if( $comment.height() > 50 ){      $comment.height( $comment.height() - 50 ); //重新設(shè)置高度，在原有的基礎(chǔ)上減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>

運行效果圖如下：