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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
对vue中methods互相调用的方法详解
Aug 30 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
ES6字符串的扩展实例
Dec 21 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php按单词截取字符串的方法
2015/04/07 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
通过Pandas读取大文件的实例
2018/06/07 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python中函数参数匹配模型详解
2019/06/09 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
公司演讲稿开场白
2014/08/25 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
pycharm无法安装cv2模块问题
2022/05/20 Python