JavaScriptのDOM要素のサイズと位置

8734 ワード
元素 の
この章では、ページ内の要素のさまざまなサイズとさまざまな位置の計算方法について説明し、よりよく理解します.
一.要素CSSサイズ1を取得する.エレメントのサイズをstyleインラインで取得

  
  
  
  
    
   
   
   
   
  1. var box = document.getElementById('box'); //     
    2. 
   
   
   
   
  2. box.style.width; //200px、  
    3. 
   
   
   
   
  3. box.style.height; //200px、  
    4.

PS:style取得行内のstyle属性しか取得できないCSSスタイルの幅と高さ、取得があれば;ない場合は空に戻ります.
2.計算による要素のサイズの取得

  
  
  
  
    
   
   
   
   
  1. var style = window.getComputedStyle ? 
    2. 
   
   
   
   
  2. window.getComputedStyle(box, null) : null || box.currentStyle; 
    3. 
   
   
   
   
  3. style.width; //1424px、200px、auto 
    4. 
   
   
   
   
  4. style.height; //18px、200px、auto 
    5.

PS:取得要素のサイズを計算することで、行内、インライン、またはリンクであるかどうかにかかわらず、計算された結果が返されます.自分でサイズを設定すると、要素のサイズが返され、自分が設定していない場合、非IEブラウザはデフォルトのサイズを返し、IEブラウザはautoを返します.
3.CSSStyleSheetオブジェクトのcssRules(またはrules)属性から要素サイズを取得する

  
  
  
  
    
   
   
   
   
  1. var sheet = document.styleSheets[0]; //  link  style 
    2. 
   
   
   
   
  2. var rule = (sheet.cssRules || sheet.rules)[0]; //        
    3. 
   
   
   
   
  3. rule.style.width; //200px、  
    4. 
   
   
   
   
  4. rule.style.height; //200px、  
    5.

PS:cssRules(またはrules)は、インラインおよびリンクスタイルの幅と高さしか取得できません.行内および計算後のスタイルは取得できません.まとめ:以上の3つのCSSが要素サイズを取得する方法は、要素のCSSサイズしか取得できませんが、要素自体の実際のサイズを取得できません.例えば、内側の余白、スクロールバー、枠線などが加わっています.
二.要素の実際のサイズ1を取得する.ClientWidthとclientHeightの属性のセットは、要素のビジュアル領域のサイズを取得することができ、要素の内容と内側の余白が占める空間のサイズを得ることができます.

  
  
  
  
    
   
   
   
   
  1. box.clientWidth; //200 
    2. 
   
   
   
   
  2. box.clientHeight; //200 
    3.

PS:要素サイズが返されますが、単位はありません.デフォルトの単位はpxです.100 emなどの単位を強制的に設定すると、pxのサイズが返されます.(CSS取得は、あなたが設定したスタイルで取得します).PS:要素の実際の大きさについて、clientWidthとclientHeightの理解方式は以下の通りである:1.枠を増やして、変化がなくて、200です;2.外の距離を増やして、変化がなくて、200です;3.スクロールバーを追加し、最終値は元のサイズからスクロールバーを減算したサイズに等しく、184である.4.内側の余白を増やし、最終値は元の大きさに内側の余白を加えた大きさに等しく、220である.PS:CSSの幅と高さが設定されていない場合、非IEブラウザはスクロールバーと内側マージンの計算後のサイズを計算し、IEブラウザは0を返します.
2.scrollWidthとscrollHeightという属性のセットで、スクロールコンテンツの要素サイズを取得できます.

  
  
  
  
    
   
   
   
   
  1. box.scrollWidth; //200 
    2. 
   
   
   
   
  2. box.scrollWidth; //200 
    3.

PS:要素サイズが返され、デフォルトの単位はpxです.CSSの幅と高さが設定されていない場合は、計算された幅と高さが得られます.PS:要素の実際の大きさについて、scrollWidthとscrollHeightは以下のように理解する:1.フレームを増加して、異なるブラウザは異なった解釈があります:a)FirefoxとOperaブラウザはフレームの大きさを増加して、220 x 220 b)IE、ChromeとSafariブラウザはフレームの大きさを無視して、200 x 200 c)IEブラウザはその本来の内容の高さだけを表示して、200 x 18 2.内側マージンを増加すると、最終値は元のサイズに内側マージンのサイズを加える220 x 220、IEは220 x 38となる.スクロールバーを増加すると、最終値は元のサイズからスクロールバーのサイズを減算することに等しく、184 x 184、IEは184 x 18 4である.外部情報を増やして、変化がない.5.コンテンツオーバーフローを増加させ、Firefox、Chrome、IEは実際のコンテンツの高さを取得し、Operaは前の3つのブラウザより取得した高さが小さく、Safariは前の3つのブラウザより取得した高さが大きい.
3.offsetWidthとoffsetHeightのプロパティのセットは、枠線、内側余白、スクロールバーを含む要素の実際のサイズを返します.

  
  
  
  
    
   
   
   
   
  1. box.offsetWidth; //200 
    2. 
   
   
   
   
  2. box.offsetHeight; //200 
    3.

PS:要素サイズが返され、デフォルトの単位はpxです.CSSの幅と高さが設定されていない場合、計算された幅と高さが得られます.PS:要素の実際のサイズについて、offsetWidthとoffsetHeightは以下のように理解する:1.枠線を増やすと、最終値は元のサイズに枠線のサイズを加えて220になります.2.内側の余白を増やすと、最終値は元の大きさに内側の余白の大きさを加えて220になります.3.外部情報を増加し、変化がない.4.スクロールバーを増やし、変化がなく、減少しない.PS:要素サイズの取得には、一般的にブロック要素であり、CSSサイズを設定した要素が便利である.インラインエレメント(inline)やサイズを設定していないエレメントでは特に面倒なので、使うときに注意することをお勧めします.
3.要素周辺の大きさ1を取得する.ClientLeftとclientTopという属性は、要素が左枠線と上枠線のサイズを設定していることを取得します.

  
  
  
  
    
   
   
   
   
  1. box.clientLeft; //         
    2. 
   
   
   
   
  2. box.clientTop; //         
    3.

PS:現在はLeftとTopのセットしか提供されておらず、RightとBottomは提供されていません.4つのエッジ幅が異なる場合は、計算後のスタイルで直接取得するか、以上の3つの要素サイズの減算を用いて求めることができます.
2.offsetLeftとoffsetTopという属性のセットで、親要素に対する現在の要素の位置を取得できます.

  
  
  
  
    
   
   
   
   
  1. box.offsetLeft; //50 
    2. 
   
   
   
   
  2. box.offsetTop; //50 
    3.

PS:親要素に対する要素の現在の位置を取得するには、position:absoluteを位置決めするように設定することが望ましい.そうでなければ、ブラウザによって説明が異なります.PS:枠線と内マージンを加えると位置に影響しませんが、外マージンを加えると加算されます.

  
  
  
  
    
   
   
   
   
  1. box.offsetParent; //      
    2.

PS:offsetParentでは、自分の親要素がの場合、非IEはbodyオブジェクトを返し、IEはhtmlオブジェクトを返します.2つの要素がネストされている場合、親要素が位置決めposition:absoluteを使用していない場合、offsetParentはbodyオブジェクトまたはhtmlオブジェクトを返します.したがって、offsetLeftとoffsetTopを取得する際には、CSSの位置決めが重要です.
もし、多くの階層で、外層が位置決めされているとしたら、私たちはどのようにして内層の要素がbodyまたはhtml要素からの距離を取得しますか?つまり、任意の要素がページから離れた位置を取得します.では、関数を記述し、遡上して累積を取得することで実現することができます.

  
  
  
  
    
   
   
   
   
  1. box.offsetTop + box.offsetParent.offsetTop; //         
    2.

多層の場合は、ループまたは再帰を使用する必要があります.

  
  
  
  
    
   
   
   
   
  1. function offsetLeft(element) { 
    2. 
   
   
   
   
  2. var left = element.offsetLeft; //        
    3. 
   
   
   
   
  3. var parent = element.offsetParent; //         
    4. 
   
   
   
   
  4. while (parent !== null) { //           
    5. 
   
   
   
   
  5. left += parent.offsetLeft; //         
    6. 
   
   
   
   
  6. parent = parent.offsetParent; //         
    7. 
   
   
   
   
  7. } //       
    8. 
   
   
   
   
  8. return left; 
    9. 
   
   
   
   
  9. } 
    10.

3.scrollTopとscrollLeftという属性のセットは、スクロールバーが非表示になっている領域のサイズを取得したり、その領域に配置したりすることができます.

  
  
  
  
    
   
   
   
   
  1. box.scrollTop; //            
    2. 
   
   
   
   
  2. box.scrollLeft; //            
    3.

スクロールバーを最初の位置にスクロールする場合は、次の関数を書きます.

  
  
  
  
    
   
   
   
   
  1. function scrollStart(element) { 
    2. 
   
   
   
   
  2. if (element.scrollTop != 0) element.scrollTop = 0; 
    3. 
   
   
   
   
  3. } 
    4.

Bootstrap学習ノート1
【剣指offer】【九度oj】スタックの圧入圧出