jquery動(dòng)態(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動(dòng)態(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" />
點(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基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效,非常的不錯(cuò),有需要的小伙伴可以參考下。2016-02-02jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實(shí)現(xiàn)滑動(dòng)選擇的效果,需要的朋友可以參考下2015-06-06jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
最近項(xiàng)目開發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候,可以進(jìn)行倒計(jì)時(shí),倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后,倒計(jì)時(shí)停止,可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽??此坪軓?fù)雜其實(shí)實(shí)現(xiàn)代碼很簡(jiǎn)單,下面小編給大家分享下實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-05-05jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
本篇文章給大家詳細(xì)分享的是jquery+css3來(lái)寫出熊貓tv導(dǎo)航的效果,以及代碼分享,喜歡的朋友參考下。2018-02-02jquery實(shí)現(xiàn)漂浮在網(wǎng)頁(yè)右側(cè)的qq在線客服插件示例
很實(shí)用的一款QQ在線客服代碼,點(diǎn)擊QQ圖標(biāo),可直接與客服對(duì)話,詳細(xì)如下,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05JQuery Ajax 異步操作之動(dòng)態(tài)添加節(jié)點(diǎn)功能
異步操作動(dòng)態(tài)添加節(jié)點(diǎn),導(dǎo)致在代碼中給添加的節(jié)點(diǎn)全局綁定事件或者獲取元素?zé)o效,問題出在哪里呢?下文給大家介紹下,感興趣的朋友參考下吧2017-05-05Jquery Post處理后不進(jìn)入回調(diào)的原因及解決方法
通過Jquery的Post方法把Json數(shù)據(jù)傳到Jsp后臺(tái),處理后卻怎么都不進(jìn)入回調(diào)函數(shù),解決方法如下2014-07-07jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對(duì)jQuery操作CheckBox的方法(選中,取消,取值)進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jquery 動(dòng)態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動(dòng)態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁(yè)面加載的時(shí)候最好在頁(yè)面加載完后執(zhí)行創(chuàng)建,感興趣的朋友可以了解下2013-04-04