效果体验：http://keleyi.com/keleyi/phtml/jquery/23.htm

完整代码：

 <!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" />

 <a href="http://keleyi.com/a/bjad/tar6g4m7.htm" target="_blank">原文</a> <a href="http://keleyi.com/">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> 点击按钮，注意下方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>

参考：

http://keleyi.com/a/bjac/e753bc9c582e4fb0.htm

http://keleyi.com/a/bjad/yy8jnwqj.htm

web前端资源：

http://www.cnblogs.com/jihua/p/webfront.html

jquery动态改变div宽度和高度的更多相关文章

  1. JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  2. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  3. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  4. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  5. [Flex] 动态获取组件宽度和高度

    flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...

  6. DIV垂直/水平居中2（DIV宽度和高度是动态的）

    <!doctype html><html><head><meta charset="utf-8"><title>块元素D ...

  7. jquery动态调整div大小使其宽度始终为浏览器宽度

    需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...

  8. jquery动态修改div高度

    <!DOCTYPE html> <html> <head> <script src="jquery-1.4.2.min.js">&l ...

  9. img超出div width时， jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

随机推荐

  1. android/java 根据当前时间判断股票交易状态(未开盘 交易中 休市中 已收盘)

    /** * @param data yyyy-MM-dd HH:mm:ss 时间 * @return 未开盘 交易中 休市中 已收盘 */ public static String getSotckS ...

  2. 用SQL语句创建四个表并完成相关题目-10月18日更新

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  3. OpenCASCADE Documentation System

    OpenCASCADE Documentation System eryar@163.com Abstract. Doxygen is the de facto standard tool for g ...

  4. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

  5. 【记录】ASP.NET MVC JsonResult JsonRequestBehavior AllowGet

    JS Ajax 调用代码: $.ajax({ url: "/AjaxController/GetInfoById", type: 'GET', datatype: "js ...

  6. 关于 android 的 view.getLeft(), getRight(), getTop(), getBottom() 的一些疑惑(坑)解答

    (原创) 今天在做下滑刷新的时候碰到 view 的四个 get 函数有点特别,具体遇到的问题如下,经反复测试和查找资料,填坑如下: 1,为什么我有时候在使用getLeft(), getRight(), ...

  7. android 如何获取手机的图片、视频、音乐

    在android 开发中,很多时候,我们会需要调用到用户本机的照片.视频或者是音乐让用户选择,来进行我们APP对应的操作. button.setOnClickListener(new OnClickL ...

  8. 韩国"被申遗" （转自果壳）

    "被申遗"不是指"没申遗",而是全都经过了中国人重新包装. 近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网 ...

  9. 相克军_Oracle体系_随堂笔记013-字符集

    linux环境下: [root@single ~]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8" …… windows环境下: C ...

  10. Cesium原理篇：6 Render模块(5: VAO&RenderState&Command)

    VAO VAO(Vertext Array Object),中文是顶点数组对象.之前在<Buffer>一文中,我们介绍了Cesium如何创建VBO的过程,而VAO可以简单的认为是基于VBO ...