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中__proto__与prototype的关系深入理解
Dec 04 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
vue构建单页面应用实战
Apr 10 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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加密解密的代码
2006/10/09 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP缓冲区用法总结
2016/02/14 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP实现图片压缩
2020/09/09 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python实现批量下载图片的方法
2015/07/08 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
机械专业应届生求职信
2013/12/12 职场文书
校园活动宣传方案
2014/03/28 职场文书
故意杀人案辩护词
2015/05/21 职场文书
在校学生证明格式
2015/06/24 职场文书
读书笔记格式
2015/07/02 职场文书