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对象和字串之间的转换实例探讨
Apr 21 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP中数组的分组排序实例
2014/06/01 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python修改MP3文件的方法
2015/06/15 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python学生信息管理系统修改版
2018/03/13 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python异步存储数据详解
2019/03/19 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
新学期红领巾广播稿
2014/01/14 职场文书
超市活动计划书
2014/04/24 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2015年科协工作总结
2015/05/19 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server