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

前端技术 2023/09/08 JavaScript

完整代码:

<!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>

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

本文地址:https://www.stayed.cn/item/22354

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。