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


Posted in Javascript onSeptember 07, 2016

本文实例讲述了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>

运行效果图如下:

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

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

Javascript 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
JS实现可视化文件上传
Sep 08 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 #Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 #Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 #Javascript
JS实现页面载入时随机显示图片效果
Sep 07 #Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
You might like
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
谈谈vue中mixin的一点理解
2017/12/12 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
React中的refs的使用教程
2018/02/13 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python实现的各种排序算法代码
2013/03/04 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
详解Scrapy Redis入门实战
2020/11/18 Python
后勤主管工作职责
2013/12/07 职场文书
学习经验交流会主持词
2014/04/01 职场文书
跳槽求职信范文
2014/05/26 职场文书
道路施工安全责任书
2014/07/24 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
工作能力自我评价2015
2015/03/05 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android