jquery动态改变div宽度和高度


Posted in Javascript onFebruary 09, 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="http://keleyi.com/keleyi/pmedia/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 学习 - 提高篇
Feb 02 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
angularJS结合canvas画图例子
Feb 09 #Javascript
jquery实现上下左右滑动的方法
Feb 09 #Javascript
js实现上传图片预览的方法
Feb 09 #Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
jquery实现相册一下滑动两次的方法
Feb 09 #Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
You might like
PHP 采集程序中常用的函数
2009/12/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python树的同构学习笔记
2019/09/14 Python
Python实现FLV视频拼接功能
2020/01/21 Python
如何理解python面向对象编程
2020/06/01 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
学python最电脑配置有要求么
2020/07/05 Python
学习Python需要哪些工具
2020/09/04 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
关于廉洁的广播稿
2014/01/30 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
森林防火标语
2014/06/23 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android