效果体验：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. IM消息送达保证机制实现(二)：保证离线消息的可靠投递

    1.前言 本文的上篇<IM消息送达保证机制实现(一):保证在线实时消息的可靠投递>中,我们讨论了在线实时消息的投递可以通过应用层的确认.发送方的超时重传.接收方的去重等手段来保证业务层面消 ...

  2. Constraint4：default约束

    Default约束的作用是在insert语句执行时,如果未显式给指定的column赋值,那么使用默认值给column赋值:如果在Insert命令中显式为指定的Column赋值,那么将插入显式值.每一列 ...

  3. jQuery源码分析系列(40）: 动画设计

    前言 jQuery动画是通过animate这个API设置执行的,其内部也是按照每一个animate的划分封装了各自动画组的行为, 包括数据过滤.缓动公式.一些动画默认参数的设置.元素状态的调整.事件的 ...

  4. error: failed to push some refs to '......'解决方案

    由于是初学者,又因为最近项目需要,只好边学边用吧. 在使用  “git push origin master” 时出现了以下问题 网上搜到的解决方案,可用: 先输入: git stash(用于暂存当前 ...

  5. .NET平台开源项目速览(9)软件序列号生成组件SoftwareProtector介绍与使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Software Protector序列号生成组件.今天就通过一篇简单的文章来预览一下其强大的功 ...

  6. 【tomcat】不同域名解析到同一tomcat不同项目上

    问题: 1. 有多个域名,想输入的每个域名只能访问其中的一个项目 2. 这些项目都部署在同一个tomcat上的 解决步骤:      1.首先把所有域名都解析到这台服务器上,解析时只能填写ip地址,不 ...

  7. Java面向对象练习

    1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1)无参——宽.高默认值为1:(2)1个参数——宽.高均为参数值:(3)2个参数——宽.高各为参数值. 要求:进行 ...

  8. setTimeout与取号机之间的关系

    说到setTimeout写过javascript的伙伴们一定不会陌生,去银行办过存取款业务的伙伴一定对取号机不会陌生.今天群里有个好伙伴在问setTimeout的问题,大伙你一言我一语,讲了很多,可是 ...

  9. MySQL Range Optimization

    8.2.1.3 Range Optimization MYSQL的Range Optimization的目的还是尽可能的使用索引 The range access method uses a sing ...

  10. sqoop数据导出导入命令

    1. 将mysql中的数据导入到hive中 sqoop import --connect jdbc:mysql://localhost:3306/sqoop --direct --username r ...