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代码
Aug 13 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
浅析Python 责任链设计模式
2020/09/11 Python
一个入门级python爬虫教程详解
2021/01/27 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
银行求职推荐信范文
2013/11/30 职场文书
质量承诺书格式
2014/05/20 职场文书
开除通知书范本
2015/04/25 职场文书
httpclient调用远程接口的方法
2022/08/14 Java/Android