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

完整代码：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <title>jquery动态改变div宽度和高度-柯乐义</title>
  5.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
  6.  </head>
  7.  <body>
  8.  <div>
  9.  <input id="addwidthkeleyi" value="增加宽度" type="button" />
  10.  <input id="reducewidthkeleyi" value="减少宽度" type="button" />
  11.  <input id="addheightkeleyi" value="增加高度" type="button" />
  12.  <input id="reduceheightkeleyi" value="减少高度" type="button" />
  13.  <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>
  14.  <div style="border:1px solid #999;width:200px;height:200px" id="keleyidiv"></div>
  15.  <script type="text/javascript">
  16.  $("#addwidthke"+"leyi").on("click", function () {
  17.  $("#keleyidiv").width($("#keley" + "idiv").width() + 50);
  18.  });
  19.  $("#reducewidthk" + "eleyi").on("click", function () {
  20.  $("#keleyidiv").width($("#kel"+"eyidiv").width() - 50);
  21.  });
  22.  $("#addheightkele" + "yi").on("click", function () {
  23.  $("#kel" + "eyidiv").height($("#keleyidiv").height() + 50);
  24.  });
  25.  $("#reduceheightkeley" + "i").on("click", function () {
  26.  $("#keleyidiv").height($("#keleyidiv").height() - 50);
  27.  });
  28.  </script>
  29.  </body>
  30.  </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. iOS--知识综合应用成就时髦小功能点

    iOS--知识综合应用成就时髦小功能点

  2. EditText的小细节

    EditText获取焦点时,右边图片的改变例如: <item android:state_window_focused="false" android:drawable=&q ...

  3. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  4. C++类的静态成员详解

    类的静态成员分为静态数据成员和静态成员函数 静态数据成员 假如我们要设计一个战争游戏,游戏中有许多的兵种.游戏的过程中,每隔一段时间每个兵种都会产生,同时由于战争的消耗,每个兵种士兵的数量又会减少.为 ...

  5. JAVA--继承

    项目开发遇到一个问题,稀里糊涂给实现了,现在重点讨论一下这是个什么情况,大神们如果看到希望给点指点. 问题:子类与父类具有相同的属性和方法,将子类实例化为父类,调用对应属性的get.set方法,打印出 ...

  6. 关于在用curl函数post网页数据时，遇上表单提交 type为submit 类型而且没有name和id时可能遇到的问题及其解决方法

    curl函数库实现爬网页内容的链接在 http://www.cnblogs.com/linguanh/p/4292316.html 下面这个是没有name和id 标识的 <input type= ...

  7. Oracle客户端简易连接报错ORA-12154，TNS-03505

    环境: 服务端:RHEL6.5 + Oracle Server 11.2.0.4 客户端:Win2003 + Oracle Client 10.2.0.1 1.问题现象 2.Troubleshooti ...

  8. 1Z0-053 争议题目解析697

    1Z0-053 争议题目解析697 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 697.Which statement is true about a Scheduler-gen ...

  9. Anliven - 基础知识梳理汇总 - 软件测试

    基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...

  10. 新浪云SAE使用入门，教你如何发布自己的网站

    新浪云sae是一个免费的web服务器,SAE的Web服务器采用分布式部署的方式,开发者将代码部署到SAE前端机后,会通过同步的方式,将代码部署到SAE所有的Web服务器.相当于在每一台Web服务器上都 ...