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 相关文章推荐
JavaScript Array扩展实现代码
Oct 14 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 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 current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php缓存技术详细总结
2013/08/07 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php查看网页源代码的方法
2015/03/13 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python实现弹球小游戏
2020/08/01 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
实习生自我鉴定范文
2013/12/05 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
关于打架的检讨书
2014/01/17 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Springboot中如何自动转JSON输出
2022/06/16 Java/Android