outerWidth()和width()的区别

outerWidth()和width()的区别

outerWidth(includeMargin) : 获取元素集合中第一个元素的当前计算宽度值。包括这个元素的 padding,border,如果 includeMargin 的值被设置为 true,那么 margin 的值也将被计算在宽度之内。includeMargin 的值默认为 false。该方法不适用于 window 和 document 对象。

width(value) : 为匹配的元素集合中获取第一个元素的当前计算宽度值。该方法适用于计算 window 和 document 对象的宽度。当调用 .width(value)方法 的时候，这个“value”参数可以是一个字符串（数字加单位）或者是一个数字。如果这个“value”参数只提供一个数字，jQuery会 自动加上单位px。如果只提供一个字符串，任何有效的CSS尺寸都可以为宽度赋值（就像100px, 50%, 或者 auto）。

另外 JS 中还提供了 document.body.clientWidth 来获取 body 的宽度，如果要使元素始终保持上下左右居中，而不随着浏览器窗口变化而变化，就可以使用该方法来实现。

下面是一段使元素保持上下左右居中的代码(注意居中的元素css需设置position)。

function center(node){
           centerFun(node);
           //浏览器窗口发生变化时仍然居中
          $(window).resize(function(){
              centerFun(node);
          });
           //滚动条滚动时仍然居中
           $(window).scroll(function(){
              centerFun(node);
           });
       }
       function centerFun(node){
           var windowWidth = $(window).width();
           var windowHeight = $(window).height();
           var scrollTop = $(document).scrollTop();
           var nodeLeft = (windowWidth - node.width())/2;
           var nodeHeight = (windowHeight - node.height())/2 + scrollTop;
           node.css({left: nodeLeft + 'px',top: nodeHeight + 'px',display: 'block'});
       }
       center($("#box"));