编程 Javascript

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>

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

得到文本框选中的文字，动态插入文字的js代码

Mar 07 Javascript

jquery animate 动画效果使用说明

Nov 04 Javascript

JQuery伸缩导航练习示例

Nov 13 Javascript

JavaScript四种调用模式和this示例介绍

Jan 02 Javascript

JavaScript调用客户端Java程序的方法

Jul 27 Javascript

深入理解node exports和module.exports区别

Jun 01 Javascript

利用yarn实现一个webpack+react种子

Oct 25 Javascript

js实现三级联动效果（简单易懂）

Mar 27 Javascript

JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

Aug 10 Javascript

javaScript强制保留两位小数的输入数校验和小数保留问题

May 09 Javascript

vue实现多组关键词对应高亮显示功能

Jul 25 Javascript

Vue实现穿梭框效果

Sep 30 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