jquery动态改变div宽度和高度

时间：2022-08-31 21:26:09

效果体验：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&comma;padding&comma;margin&comma;border）

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

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

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

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

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

  4. 关于div宽度和高度的100&percnt;设定

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

  5. &lbrack;Flex&rsqb; 动态获取组件宽度和高度

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

  6. DIV垂直&sol;水平居中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. 从I&sol;O复用谈epoll为什么高效

    上一篇文章中,谈了一些网络编程的基本概念.在现实使用中,用的最多的就是I/O复用了,无非就是select,poll,epoll 很多人提到网络就说epoll,认为epoll效率是最高的.单纯的这么认为 ...

  2. python动态创建类的声明

    动态创建类的声明 使用内置函数type,原型:class type(name, bases, dict)name是类的名字,相当于__class__bases是类的基类,元组,可以有多个基类,但是基类 ...

  3. Winsock IO模型之select模型

    之所以称其为select模型是因为它主要是使用select函数来管理I/O的.这个模型的设计源于UNIX系统,目的是允许那些想要避免在套接字调用上阻塞的应用程序有能力管理多个套接字. int sele ...

  4. linux&lpar;centos&rpar;下mysql忘记root密码

    1．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的  状态下,其他的用户也可以任意地登录和修 ...

  5. SQL Server - Partition by 和 Group by对比

    参考:https://www.cnblogs.com/hello-yz/p/9962356.html —————————————————— 今天大概弄懂了partition by和group by的区 ...

  6. php微信生成微信公众号二维码扫描进入公众号带参数

    https://blog.csdn.net/qq_22823581/article/details/80248555 <?php namespace app\api\model; set_tim ...

  7. node&plus;koa2获取请求参数

    1.get方式: http://localhost:3000/?user=000001&body=0002&age=26 const router = require('koa-rou ...

  8. &lbrack;django&rsqb;主次表如何取出对方数据&lbrack;主表obj&period;子表&lowbar;&lowbar;set&lpar;&rpar;&rsqb;

    [sql]mysql管理手头手册,多对多sql逻辑 国家--城市例子 class Country(models.Model): name = models.CharField(max_length=3 ...

  9. day11 - 15（装饰器、生成器、迭代器、内置函数、推导式）

    day11:装饰器(装饰器形成.装饰器作用.@语法糖.原则.固定模式) 装饰器形成:最简单的.有返回值的.有一个参数的.万能参数 函数起的作用:装饰器用于在已经完成的函数前后增加功能 语法糖:使代码变 ...

  10. php 获取唯一字符串与文件扩展名函数

    /** * 生成唯一字符串 * @return string */ function getUniqueStr(){ return md5(uniqid(microtime(true),true)); ...

相关文章