outerWidth()和width()的區(qū)別

outerWidth(includeMargin) : 獲取元素集合中第一個(gè)元素的當(dāng)前計(jì)算寬度值。包括這個(gè)元素的 padding,border,如果 includeMargin 的值被設(shè)置為 true,那么 margin 的值也將被計(jì)算在寬度之內(nèi)。includeMargin 的值默認(rèn)為 false。該方法不適用于 window 和 document 對象。

width(value) : 為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前計(jì)算寬度值。該方法適用于計(jì)算 window 和 document 對象的寬度。當(dāng)調(diào)用 .width(value)方法 的時(shí)候，這個(gè)“value”參數(shù)可以是一個(gè)字符串（數(shù)字加單位）或者是一個(gè)數(shù)字。如果這個(gè)“value”參數(shù)只提供一個(gè)數(shù)字，jQuery會 自動加上單位px。如果只提供一個(gè)字符串，任何有效的CSS尺寸都可以為寬度賦值（就像100px, 50%, 或者 auto）。

另外 JS 中還提供了 document.body.clientWidth 來獲取 body 的寬度，如果要使元素始終保持上下左右居中，而不隨著瀏覽器窗口變化而變化，就可以使用該方法來實(shí)現(xiàn)。

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

function center(node){
           centerFun(node);
           //瀏覽器窗口發(fā)生變化時(shí)仍然居中
          $(window).resize(function(){
              centerFun(node);
          });
           //滾動條滾動時(shí)仍然居中
           $(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"));