jquery获取div的宽高，包含内外边距和边框,jquery获取容器尺寸_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

jquery获取div的宽高，包含内外边距和边框,jquery获取容器尺寸

来源：未知作者：类型：图文教程点击次数：发布时间：2015-08-24 11:29:10

我们在做图片滚动时，如果考虑的长远点，可能会写成插件，那么就必须获取容器的宽度，例如li的宽度，这个宽度，考虑的全面点，除了设置的width之外，还应该包含margin、padding、border。那么，本篇就来聊下，怎么用jquery获取这些值：
首先：运行下面的代码看下效果：

<html lang="en"> <head> <meta charset="utf-8"> <title>jquery获取容器的宽高尺寸，内外边距 - 我爱模板网 www.5imoban.net</title> <script type="text/javascript" src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> </head> <body> <script> $(function(){ var divObj = $("div"); var _html = ""; _html += "div的width()：" + divObj.width() + "px。\n"; _html += "div的innerWidth()：" + divObj.innerWidth() + "px。\n"; _html += "div的outerWidth()：" + divObj.outerWidth() + "px。\n"; _html += "div的outerWidth(true)：" + divObj.outerWidth(true) + "px。\n"; alert(_html); var marginLeft = divObj.css("margin-left"); alert("div的margin-left：" + marginLeft); }) </script> <style> div{ width: 300px; height: 300px; padding:20px; border: 5px solid red; margin: 20px; } </style> <div></div> </body> </html>
提示：您可以先修改部分代码再运行

通过上面的例子，我们可以看到，jquery为我们提供了下面六组方法：

heigh([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])

height() 和 width() 可以获取通过css设置的容器的宽高，返回数值型； innerHeight() 和 innerHeight() 可以获取容器的宽高+内边距，返回数值型；outerHeight() 和 outerWidth() 可以获取容器的宽高+内边距+边框宽度；而，如果通过给outerHeight() 和 outerWidth() 加参数true，则可以获取容器的宽高+内边距+边框宽度+外边距。

当然jquery也可以通过类似 obj.css("margin-left") 的方法获取外边距，但是这里获取的是字符串类型，后面带有 px，所以还要用 parseInt 转整型，如：

var marginLeft = divObj.css("margin-left");
var marginRight = divObj.css("margin-right");
var margin = parseInt(marginLeft)+parseInt(marginRight);

通过上面的方法就可以获取外边距了。
容器的总宽度就是 outerWidth+margin 。
内边距通过css()方法获取同上。

注意：jquery无法获取css复合属性，例如，直接用 divObj.css("margin") 的方法获取容器的margin是错误的。