jquery学习之控制多行文本域高度

最新推荐文章于 2021-10-08 17:42:45 发布

wensummer

最新推荐文章于 2021-10-08 17:42:45 发布

阅读量695

点赞数

分类专栏： jquery 文章标签： jquery function class xhtml html

本文链接：https://blog.csdn.net/wenlili/article/details/7494892

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HeightChangeDemo</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  /*var $comment = $("#comment");
  $(".bigger").click(function(event)
  {
   if ($comment.height() <100)
   {
    $comment.height( $comment.height() + 70 );
   }
  });

  $(".smaller").click(function(event)
  {
   if ($comment.height() >100)
   {
    $comment.height( $comment.height() - 70 );
   }
  });*/
});

$(function(){
  var $comment = $("#comment");
  $(".bigger").click(function(event)
  {
   if ($comment.height() <100)
   {
    if (!$comment.is(":animated"))
    {
     $comment.animate( {height: "+=70"}, 400 );
    }
   }
  });

  $(".smaller").click(function(event)
  {
   if ($comment.height() >100)
   {
    if(!$comment.is(":animated"))
    {
     $comment.animate({height: "-=70"}, 400);
    }
   }
  });
});

</script>

</head>
<body>
<form>
  <div class="msg">
   <div class="msg_caption">
    <span class="bigger">放大</span>
    <span class="smaller">缩小</span>
   </div>
   <div>
    <textarea id="comment" rows="8" cols="20">
    fdsfkldslkffjdlsfjdlksfjdslkffffffffffffffffffffffffffffffffffffffffffffffffff
    fdskljflkdsjfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    fdsfdsgferrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr.
    </textarea>
   </div>
  </div>
</form>
</body>