效果体验：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. C#学习系列-文章导航

    C#学习系列-.NET体系结构 C#学习系列-类与结构的区别 C#学习系列-String与string的区别 C#学习系列-抽象方法与虚拟方法的区别 C#学习系列-out与ref的区别 C#学习系列- ...

  2. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  3. 学习3ds max插件开发过程中的一些小结

    1. 3ds max是以树状结构来管理整个场景的,每个树节点类型为INode 2. Interface类很关键,可以通过其中的GetRootNode.NumberOfChildren和GetChild ...

  4. js实现多张图片每隔一秒换一张图片

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlkAAAHWCAIAAADLlAuAAAAgAElEQVR4nOzd5XNc157w+/l7bt2n6t

  5. 《JS语言精粹》学习笔记 函数部分の闭包

    要理解闭包,首先要理解变量作用域,变量的作用域就两种,全局变量和局部变量,函数内部可以直接读取全局变量,函数外部无法读取函数内部的局部变量. 闭包定义:能读取函数内部局部变量的函数就是闭包,而只有函数 ...

  6. 深入理解DOM事件类型系列第四篇——剪贴板事件

    × 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...

  7. 梯度下降（Gradient Descent）小结

    在求解机器学习算法的模型参数,即无约束优化问题时,梯度下降(Gradient Descent)是最常采用的方法之一,另一种常用的方法是最小二乘法.这里就对梯度下降法做一个完整的总结. 1. 梯度 在微 ...

  8. PJAX实现

    一.浏览器历史API 浏览器历史就像一堆卡片,如下所示:

  9. C/C++:提升_指针的指针和指针的引用

    C/C++:提升_指针的指针和指针的引用 写在前面 今天在使用指针的时候我发现了一个自己的错误.

  10. （三）WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或 ...