jquery動態(tài)改變div寬度和高度
更新時間:2015年02月09日 15:39:36 投稿:hebedich
這篇文章主要介紹了jquery動態(tài)改變div寬度和高度,需要的朋友可以參考下
完整代碼:
復制代碼 代碼如下:
<!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動態(tài)改變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" />
點擊按鈕,注意下方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>
以上就是本代碼的全部內容了,希望大家能夠喜歡。
相關文章
jquery實現的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實現的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實現滑動選擇的效果,需要的朋友可以參考下2015-06-06JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能
異步操作動態(tài)添加節(jié)點,導致在代碼中給添加的節(jié)點全局綁定事件或者獲取元素無效,問題出在哪里呢?下文給大家介紹下,感興趣的朋友參考下吧2017-05-05jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對jQuery操作CheckBox的方法(選中,取消,取值)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery 動態(tài)創(chuàng)建元素的方式介紹及應用
動態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數創(chuàng)建3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建,感興趣的朋友可以了解下2013-04-04