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