jquery實現(xiàn)動態(tài)改變div寬度和高度
更新時間：2015年05月08日 10:19:07 投稿：hebedich
這篇文章主要介紹了jquery實現(xiàn)動態(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="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>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
jQuery+PHP實現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法
這篇文章主要介紹了jQuery+PHP實現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法,詳細(xì)分析了抽獎程序界面設(shè)計、前臺jQuery交互、后臺概率算法等抽獎功能相關(guān)技巧,需要的朋友可以參考下2016-05-05
JQuery select控件的相關(guān)操作實現(xiàn)代碼
JQuery獲取和設(shè)置Select選項方法匯總?cè)缦?，需要的朋友可以參考?/div> 2012-09-09
這篇文章主要介紹了jQuery表格插件datatables用法匯總，DataTables是一個非常強(qiáng)大的表格插件，感興趣的小伙伴們可以參考一下2016-03-03
jquery實現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
圖片等比例縮放在某些情況下還是比較事用的,不過max-width和max-height在ie6中不兼容問題很是郁悶，接下來使用jQuery解決這個問題，感興趣的各位可以參考下哈2013-03-03
這篇文章主要介紹了jQuery中$.extend()用法,實例分析了extend()方法的功能、定義及相關(guān)的使用技巧,需要的朋友可以參考下2015-06-06
鼠標(biāo)事件是指用戶在移動鼠標(biāo)光標(biāo)或者點擊任意鼠標(biāo)鍵時觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點擊,雙擊,移動等鼠標(biāo)事件,下面我們就來看下這些事件的語法和用法2015-08-08
這篇文章主要介紹了JQuery控制radio選中和不選中方法總結(jié),本文起講解了設(shè)置選中方法、設(shè)置選中和不選中示例、另一種設(shè)置選中方法、根據(jù)值設(shè)置radio選中、使用prop方法操作示例等內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Jquery實現(xiàn)自定義tooltip的方法,需要的朋友可以參考下2014-02-02
下面介紹幾個jQuery常用的方法，來讓jQuery的威力發(fā)揮出來，否則只用有限的幾個方法，相對于運(yùn)行速度問題，真不如不用jQuery2013-10-10
貌似最近騰訊手機(jī)游戲天天愛消除挺火的，我也是粉絲之一，最近對javascript一直比較感興趣然后想用js仿造一個，應(yīng)該不是太難，2015-10-10最新評論