jquery实现动态改变div宽度和高度


Posted in Javascript onMay 08, 2015

完整代码:

<!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="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" />
 点击按钮,注意下方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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
用原生js做单页应用
Jan 17 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
JavaScript基于setTimeout实现计数的方法
May 08 #Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 #Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 #Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
You might like
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php 数组元素快速去重
2017/05/05 PHP
Js中sort()方法的用法
2006/11/04 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
javascript数组去掉重复
2011/05/12 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
js实现文字滚动效果
2016/03/03 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python中turtle库的使用实例
2019/09/09 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
采购文员岗位职责
2013/11/20 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
二手车转让协议书
2015/01/29 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL