Tag Archives: jq宽度

十二 18

JQuery获取DIV宽度与高度（width,padding,margin,border）

Posted on by

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。

JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！

0
1
2
3
4
5
6
var content = $('div'). width();//只是获取content宽度
 
var contentWithPadding = $('div'). innerWidth();//获取content+padding的宽度
 
var withoutMargin = $('div'). outerWidth();//获取content+padding+border的宽度
 
var full = $('div'). outerWidth(true);//获取content+padding+border+margin的宽度

宽度与高度概念一样，只差水平与垂直向而已。

Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者，举例来说，两个 10px margin 的 div 并在一起只会有 10px margin 的距离，若是一个 20px margin，另一个为 10px margin，则会有 20px 的 margin。

但是获取当前元素的全部宽度的时候，还是获取自身的margin+content+padding+border的值。