jquery包括margin外邊距的outerWidth或者outerHeight
本章節分享一段程式碼例項,它實現了獲取包括外邊距在內的outerWidth或者outerHeight效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ height:100px; width:300px; padding:10px; margin:3px; border:1px solid blue; background-color:lightblue; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ var txt=""; txt+="div的寬度:" + $("#antzone").width()+"</br>"; txt+="div的高度:" + $("#antzone").height()+"</br>"; txt+="包括margin的outerWidth:"+$("#antzone").outerWidth(true)+"</br>"; txt+="包括margin的outerHeight:"+$("#antzone").outerHeight(true); $("#antzone").html(txt); }); }); </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
outerWidth()方法可以參閱jQuery outerWidth()一章節。
相關文章
- CSS margin外邊距CSS
- CSS margin 外邊距CSS
- CSS margin負外邊距CSS
- jQuery offset()返回值與外邊距margin的關係jQuery
- body 預設具有margin外邊距
- css中內邊距是padding,外邊距是marginCSSpadding
- 負外邊距margin對寬度的影響
- 絕對定位對margin外邊距的影響
- CSS 外邊距(margin)重疊及防止方法CSS
- 負外邊距margin對浮動元素的影響
- margin外邊距疊加簡單程式碼例項
- 深入理解CSS外邊距摺疊(Margin Collapse)CSS
- body在預設情況下是具有margin外邊距的
- margin系列之外邊距摺疊
- 負外邊距margin對於絕對定位元素的影響
- float浮動元素不會有margin外邊距合併效果
- jQuery outerWidth()jQuery
- jQuery outerHeight()jQuery
- CSS 負外邊距CSS
- matlab控制影象的邊界(margin),subplot的間距(gap)Matlab
- 用padding和margin撐起左右邊距padding
- CSS 右外邊距失效CSS
- CSS 外邊距合併CSS
- 外邊距與絕對定位
- CSS中父物件的內邊距是否對子物件的外邊距造成影響CSS物件
- jquery innerHeight()和outerHeight()的區別jQuery
- jQuery獲取div距離視窗頂部或者父元素頂部的距離jQuery
- 外邊距在定位元素中的情況
- 前端面試必備——外邊距合併前端面試
- jQuery獲取網頁中的元素距離文件邊緣的距離程式碼例項jQuery網頁
- 表格的邊距 邊框設定
- CSS 盒子的邊距塌陷CSS
- CSS中的負邊距CSS
- 12.9學習日報(盒子模型和各類注意事項、margin垂直外邊距合併、頂部塌陷問題)模型
- 行級元素左右邊距及塊級元素上下邊距
- Android UI系列-----長度單位和內外邊距AndroidUI
- jquery實現的垂直或者水平無縫滾動外掛jQuery
- 盒子模型的外邊距塌陷和合並問題及解決方案模型