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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
推荐php模板技术[转]
2007/01/04 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php 实现进制相互转换
2016/04/07 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Python中为什么要用self探讨
2015/04/14 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python生成数字图片代码分享
2017/10/31 Python
python逆向入门教程
2018/01/15 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
机械个人求职信范文
2014/01/24 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
吨的认识教学反思
2014/04/27 职场文书
事业单位考核材料
2014/05/21 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
酒店员工手册范本
2015/05/14 职场文书