效果体验：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. SQL Server 2014新特性探秘(3)-可更新列存储聚集索引

    简介      列存储索引其实在在SQL Server 2012中就已经存在,但SQL Server 2012中只允许建立非聚集列索引,这意味着列索引是在原有的行存储索引之上的引用了底层的数据,因此会 ...

  2. 解密jQuery内核 DOM操作方法（二）html,text,val

    回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 看图对照区别 innerText 设置 ...

  3. Minor【 PHP框架】5.事件

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  4. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  5. ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

    为了加强安全性,MySQL5.7为root用户随机生成了一个密码,在error log中,关于error log的位置,如果安装的是RPM包,则默认是/var/log/mysqld.log. 一般可通 ...

  6. [c++] Templates

    Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...

  7. [CUDA] CUDA to DL

    又是一枚祖国的骚年,阅览做做笔记:http://www.cnblogs.com/neopenx/p/4643705.html 这里只是一些基础知识.帮助理解DL tool的实现. “这也是深度学习带来 ...

  8. IntelliJ IDEA上创建maven Spring MVC项目

    IntelliJ IDEA上创建Maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...

  9. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  10. jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——一些有用的Sizzle API

    说一下Sizzle中零碎的API.这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx. 具体 ...