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

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

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

width(value) : 為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前計(jì)算寬度值。該方法適用于計(jì)算 windowdocument 對象的寬度。當(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"));
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,814評論 1 92
  • Window和document對象的區(qū)別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,255評論 0 5
  • 前言 CSSOM全稱CSS對象模型,涉及兩部分內(nèi)容,第一部分和操作樣式表相關(guān),第二部分和元素尺寸相關(guān),本文介紹第二...
    江楓閱讀 3,022評論 1 10
  • 我愿相信你,是把我放在你心里面。 偶爾一提神,我就出現(xiàn)在你眼前。 我在你心里面是怎樣的一個(gè)我, 我至今無從得知。 ...
    素未謀面閱讀 222評論 0 0
  • 情人節(jié)剛剛過去,日本一個(gè)大胖小子火了。 這位真心人(死宅男)就跟他的充氣娃娃女友一起到了淺草市約會。 一部如偶像劇...
    三只大叔閱讀 384評論 0 0