程序员开发实例大全宝库

网站首页 > 编程文章 正文

jQuery做一个会伸缩的多行文本框【407】

zazugpt 2024-08-17 01:57:10 编程文章 31 ℃ 0 评论
  • 本文原于头条,更多相关文章请关注我,原创落笔承冰

一、首先我们先创建两个按钮,一个文本框,要用jQuery,所以官方库文件不要忘记了。

二、给按钮加个样式,文本框里放些字,这样好看点。

三、开始创建这两个按钮的点击事件,事件先空着。

四、忘记给多行文本框加id了。

五、开始添加放大缩小的方法吧。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <title>Document</title>
 <style>
 .big,.small{
 background: black;
 /* 背影为黑色 */
 color: white;
 /* 字为白色 */
 border: none;
 /* 去掉按钮边框 */
 cursor: pointer;
 /* 按钮上鼠标为小手形 */
 }
 </style>
</head>
<body>
 <div>
 <button class="big">放大</button>
 <button class="small">缩小</button>
 </div>
 <textarea name="" id="comment" cols="30" rows="10">
 请关注我请关注我请关注我请关注我请关注我请关注我请关注我请关注我
 请关注我请关注我请关注我请关注我请关注我请关注我请关注我请关注我
 请关注我请关注我请关注我请关注我请关注我请关注我请关注我请关注我
 </textarea>
 <script>
 $(".big").click(function () {
 $("#comment").height( $("#comment").height() + 20 );
 // 点击后增加20高
 });
 $(".small").click(function () {
 $("#comment").height( $("#comment").height() - 20 );
 // 点击后减20高
 });
 </script>
</body>
</html>

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表