编程 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处理VBArray的函数使用说明

May 11 Javascript

测试你的JS的掌握程度的代码

Dec 09 Javascript

node.js中的fs.futimes方法使用说明

Dec 17 Javascript

jQuery里filter()函数与find()函数用法分析

Jun 24 Javascript

微信小程序教程之wxapp 视图容器 view

Oct 19 Javascript

js实现兼容PC端和移动端滑块拖动选择数字效果

Feb 16 Javascript

vuejs响应用户事件（如点击事件）

Mar 14 Javascript

你可能不知道的JSON.stringify()详解

Aug 17 Javascript

推荐一个基于Node.js的表单验证库

Feb 15 Javascript

js实现简单掷骰子效果

Oct 24 Javascript

Vue 的双向绑定原理与用法揭秘

May 06 Javascript

JavaScript实现消消乐的源代码

Jan 12 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