jQuery獲得包含margin的outerWidth和outerHeight的方法
本文實(shí)例講述了jQuery獲得包含margin的outerWidth和outerHeight的方法。分享給大家供大家參考。具體如下:
<!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"> </div> <br> <button>Display dimensions of div</button> <p>outerWidth(true) - returns the width of an element (includes padding, border, and margin).</p> <p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
在前面我們分別通過innerHeight()和innerWidth()來(lái)獲得第一個(gè)匹配元素內(nèi)部區(qū)域的高度和寬度,我們?cè)趹?yīng)用中往往除了需要內(nèi)部的尺寸,同樣還需要知道外部的高度和寬度.2009-11-11jQuery實(shí)現(xiàn)的給圖片點(diǎn)贊+1動(dòng)畫效果(附在線演示及demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的給圖片點(diǎn)贊+1動(dòng)畫效果,并附帶在線演示及demo源碼下載,涉及jQuery鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2015-12-12Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說(shuō)明與tableUI優(yōu)化
Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說(shuō)明與tableUI優(yōu)化,需要的朋友可以參考下。2010-04-04jQuery mobile的header和footer在點(diǎn)擊屏幕的時(shí)候消失的解決辦法
這篇文章主要介紹了jQuery mobile的header和footer在點(diǎn)擊屏幕的時(shí)候消失的解決辦法,通過給header和footer添加 data-position="fixed" 和 data-tap-toggle="false"完成此功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)放上去顯示懸浮層即彈出定位的div層,需要的朋友可以參考下2014-04-04jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能,為大家推薦了一款圖片上傳預(yù)覽插件,感興趣的小伙伴們可以參考一下2016-01-01JQuery實(shí)現(xiàn)自定義對(duì)話框的代碼
JavaScript為我們提供幾種對(duì)話框功能,但功能都十分有限;雖然在IE下可以通過模式窗體的方式創(chuàng)建更豐富的對(duì)話框功能,但畢竟只有IE得到支持。2008-06-06jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果
這篇文章主要為大家詳細(xì)介紹了slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05