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)文章
這篇文章主要為大家詳細(xì)介紹了jquery橫向縱向鼠標(biāo)滾輪全屏切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下2014-05-05
這篇文章主要為大家介紹了jQuery的拷貝對(duì)象，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小
本文為大家介紹的這個(gè)示例為jquery實(shí)現(xiàn)的預(yù)覽圖片，當(dāng)鼠標(biāo)放上去顯示實(shí)際大小，感興趣的朋友可以學(xué)習(xí)下2014-01-01
下面小編就為大家?guī)?lái)一篇jQuery向父輩遍歷的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
本文主要介紹了div中文字內(nèi)容溢出常見(jiàn)的解決方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章介紹了jquery事件綁定的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件
希望能和大家一起交流學(xué)習(xí)。先放上去一個(gè)上周學(xué)習(xí)的一個(gè)jquery插件，基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件。2010-12-12
我們有時(shí)使用jQuery新加元素后，會(huì)出現(xiàn)新元素不會(huì)執(zhí)行一部分原有的事件函數(shù)。本文主要介紹了jQuery解決添加元素后不執(zhí)行原有事件的方法，感興趣的同學(xué)可以了解一下2021-11-11
這篇文章主要介紹了jquery隔行換色效果實(shí)現(xiàn)方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01