異なるブラウザでDOM要素のさまざまな高さを取得

一:HTMLにおける各種高さ
一:紹介
HTMLでは高さや幅にめまいがすることは一度もありませんが、プロジェクトをするたびに関連資料を調べます.時間があるうちにこの資料をきちんと整理して、後で使われるようにします.
W 3 CのWindowオブジェクトのプロパティ図を次に示します.図から高さと幅に関するいくつかの属性を見ることができます.彼らはそれぞれinnerHeight,innerWidth,outerHeight,outerWidth,pageXOffset,pageYOffset,screenLeft,screenTop,screenX,screenYです.次に、彼らがそれぞれ何を代表しているかを検証します.
二:innerHeight、innerWidth、outerHeight、outerWidth
innerHeight,innerWidth:ウィンドウのドキュメント表示領域の高さと幅(メニューバー、ツールバー、スクロールバーの高さを除く)を返します.IEはこれらの属性をサポートせず、documentを使用する.documentElement(html要素)またはdocument.body(IEバージョンに関連)のclientWidthとclientHeightが代わります.各ブラウザでのテストの効果は次のとおりです.

グーグル

IE9+

IE8

IE7

IE5

FF

上図を見ると、IE 9以下ではinnerHeightプロパティはサポートされていません.残りのバージョンのブラウザではサポートされています.ただ、ブラウザによって少し違いがあります.すべてのブラウザでdocumentがサポートされています.documentElement.クライアント・ヘイトとdocumentbody.ClientHeightプロパティ.ただIE 5ではdocument.documentElement.ClientHeightは0です.したがって、すべてのブラウザと互換性を持ってドキュメントの表示領域の高さと幅を取得するには、次のコードを使用します.

    lyq.getClientHeight = function(){
        var clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        return clientHeight;
    }

outerHeight,outerWidth:ウィンドウの外部高さと高さを返します.IE 9以下ではこの属性はサポートされておらず、残りのブラウザではこの属性がサポートされている.ただし、Googleブラウザでは、outerHeightとinnerHeight、outerWidthとouterWidthは、ブラウザウィンドウのサイズではなく、ウィンドウのドキュメント表示領域の高さと幅と同じ値を返します.ただし、FFのような他のブラウザでは、Safariはブラウザウィンドウ自体のサイズを返します.
screenLeft,screenTop,screenX,screenY:ウィンドウの左上隅の画面上のx座標とy座標を宣言します.
screenLeft,screenTopの異なるブラウザでのテスト.

グーグル

IE

FF

QQ

UC

観察したところscreenTopでは,screenLeftは火狐ではサポートされていないほか,他のブラウザでもサポートされていることが分かった.ただし、IEとQQブラウザではドキュメント表示領域の画面からの座標を計算し、Google、UCはブラウザ全体の画面からの座標(メニューバー、ツールバーなどを含む)を計算します.具体的な状況はブラウザによって決まります.

    clientWidth = height + padding-left + padding-right - scrollbar.width(       )
    clientHeight =  clientWidth
    clientTop = border-top
    clientLeft = border-left
             = height + padding-top + padding-bottom - clientHeight
             = width + padding-left + padding-right
             = height + padding-top + padding-bottom
             = width + padding-left + padding-right - clientWidth
    
    offsetHeight：  IE6，IE7，IE8     FF，  ，      clientHeight +       +   
    offsetWidth： offsetHeight。
    offsetTop = margin-top + top(      )
    offsetLeft = margin-left + left(      )
    
    scrollHeight = padding-top + padding-bottom +   margix box   。        ，        。
    scrollWidth =  scrollHeight。
              ：
    IE6，IE7  scrollHeight          ，    clientHeight。
    FF，Chrome  scrollHeight       ，    clientHeight。
     ：           ，body documentElement clientHeight，offsetHeight scrollHeight               。        ，             ，   documentElement.clientHeight，
  body.clientHeight         。
    FF19
     body   overflow:scroll           ，  body.clientHeight    body.scrollHeight。
    body
    clientHeight = body.padding + body.height(css       )
    offsetHeight = clientHeight + body.border
    scrollHeight == clientHeight;
    documentElement
    clientHeight = window     - scrollbar.height
    offsetHeight = body.offsetHeight + body.margin;
    scrollHeight >= clientHeight
       
    offsetHeight = padding + border + height
    clientHeight = padding + height - scrollbar.height
    scrollHeight >= clientHeight
        ：FF  scrollHeight      clientHeight
    
    Chrome
    body
    clientHeight = body.padding + body.height(css       )
    offsetHeight = body.clientHeight + bodt.border
    scrollHeight = body.padding +      ( height    )     clientHeight
    documentElement
    clientHeight = window     -      
    offsetHeight = body.offsetHeight + body.margin
    scrollHeight =      ( body  height  )
       
    offsetHeight = padding + border + height
    clientHeight = padding + height - scrollbar.height
    scrollHeight >= clientHeight
    
    Safari5
    body
    clientHeight = body.padding + body.height（CSS     ）;
    offsetHeight = body.clientHeight + border;
    scrollHeight = body.padding +      ( height    )，     documentElement.clientHeight。
    documentElement
    clientHeight = window     –      
    offsetHeight = body.offsetHeight + body.margin
    scrollHeight=      （ body  height  ），     documentElement.offsetHeight。
    
    IE8
     IE8 ，       17   。
    body
    clientHeight= body.padding + body.height(css       )
    offsetHeight = body.clientHeight + body.border
    scrollHeight =      （ body  height  ），     clientHeight。
    documentElement
    clientHeight =     （      ）
    offsetHeight = clientHeight +       + body.border
    scrollHeight=      （ body  height  ），     body.offsetHeight+ margin。
       
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight >= clientHeight
         IE8  scrollHeight>=clientHeight。
    offsetLeft =   border               offsetParent borderbox     。
    
    IE7
     IE7 ，body                ，      。
    body
    clientHeight= body.padding + height(css       )– body     。
    offsetHeight= clientHeight +       +body.border。
    scrollHeight=        （ body  height  ）。
    documentElement
    clientHeight = window    （         ）
    offsetHeight = clientHeight。
    scrollHeight = body.offsetHeight + border.margin
      
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight = padding +   margin box   
         ，IE7  scrollHeight    clientHeight。
    offsetLeft =   border box       （  offsetParent） borderbox      。
    
    IE6
     IE6 ， IE7  ， body                。
    body
    clientHeight = body.padding + body.height
    offsetHeight = body.clientHeight + body.border + body      。
    scrollHeight =     （ body  height  ）。
    documentElement
     IE6 ， IE7  ，  body                ，   clientHeight offsetHeight           。
    clientHeight =     （          ）
    offsetHeight =clientHeight + body.border
    scrollHeight = body.offsetHeight + body.margin
      
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight = padding +   margin box   
         ，IE6  scrollHeight    clientHeight。
    
    scrollLeft：                               
    scrollTop：                             
    
    Event    
    clientX：        x  。
    clientY：        y  。 
    screenX：       x  。
    screenY：        y  。
    
    IE    
    offsetX：                  x     
    offsetY：                  y     
    x：                  y  。 clientX
    y：                  y  。 clientY 
    
      ：event.clientX       ，mouse        x  ，event.X   。                 relative，event.clientX  ， event.x               。    pageX，pageY  x y  。

これだけ言って、jQueryでこれらの違いをどのように処理しているかを見てみましょう(jQueryのeventオブジェクトが再カプセル化されています)

    offset()：                ，             ：top left。        。
    offsetParent()：           。
    position()：              ，             ：top left。
    scrollTop()：                ，              。 JS scrollTop。
    scrollLeft()：                ，              。 JS scrollLeft。
    event.pageX：              。
    event.pageY：              。
    innerHeight()：             ( padding，  border)
    innerWidth()： innerHeight();
    outerHeight(options)：   false，  padding   ； true，margin     。
    outerWidth(options)： outerHeight(options)。
    height()：      ，  padding。
    width()： height();
    css("height")：       "px"。 height()   。
    css("width")：       "px"。 width()   。
      ：height()        ，  CSS box-sizing    。height('value')          CSS box-sizing      ，        border-box，              outerHeight(false)，          。