jquery实现动态改变div宽度和高度


Posted in Javascript onMay 08, 2015

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery动态改变div宽度和高度</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
</head>
<body>
<div>
<input id="addwidthkeleyi" value="增加宽度" type="button" />
<input id="reducewidthkeleyi" value="减少宽度" type="button" />
<input id="addheightkeleyi" value="增加高度" type="button" />
<input id="reduceheightkeleyi" value="减少高度" type="button" />
 点击按钮,注意下方div宽高的变化</div>
<div style="border:1px solid #999;width:200px;height:200px" id="keleyidiv"></div>
<script type="text/javascript">
$("#addwidthke"+"leyi").on("click", function () {
$("#keleyidiv").width($("#keley" + "idiv").width() + 50);
});
$("#reducewidthk" + "eleyi").on("click", function () {
$("#keleyidiv").width($("#kel"+"eyidiv").width() - 50);
});
$("#addheightkele" + "yi").on("click", function () {
$("#kel" + "eyidiv").height($("#keleyidiv").height() + 50);
});
$("#reduceheightkeley" + "i").on("click", function () {
$("#keleyidiv").height($("#keleyidiv").height() - 50);
});
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 多级checkbox选择效果
Aug 20 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript中操作字符串小结
May 04 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
微信小程序登录换取token的教程
May 31 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 #Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 #Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
简易js代码实现计算器操作
2013/04/15 Javascript
jQuery知识点整理
2015/01/30 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python生成随机mac地址的方法
2015/03/16 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
大学生自荐信
2013/12/11 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
篮球社团活动总结
2014/06/27 职场文书
处级干部考察材料
2014/12/24 职场文书