DOMシリーズ---DOM取得寸法と位置

コンテンツの概要:
1.要素CSSサイズの取得
2.エレメントの実際のサイズを取得
3.エレメント周辺サイズの取得
 
この記事では、ページ内の要素のさまざまなサイズとさまざまな位置の計算方法について説明します.
一.取得要素CSSサイズ
1.styleによる要素のサイズの取得
var box = document.getElementById('box');//要素の取得
box.style.width;                                                
box.style.height;                                               
 
PS:style取得行内のstyle属性しか取得できないCSSスタイルの幅と高さ、あれば取得;ない場合は空に戻ります.
 
2.計算による要素のサイズの取得
var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;
style.width;                                                     //1424px、200px、auto
style.height;                                                    //18px、200px、auto
 
PS:取得要素のサイズを計算することで、行内、インライン、またはリンクであるかどうかにかかわらず、計算された結果が返されます.自分でサイズを設定すると、要素のサイズが返され、自分が設定していない場合、非IEブラウザはデフォルトのサイズを返し、IEブラウザはautoを返します.
 
3.CSSStyleSheetオブジェクトのcssRules(またはrules)属性から要素サイズを取得する
    var sheet = document.styleSheets[0];//linkまたはstyleの取得
       var rule = (sheet.cssRules || sheet.rules)[0];//最初のルールの取得
rule.style.width;    
rule.style.height;   
 
PS:cssRules(またはrules)は、インラインおよびリンクスタイルの幅と高さしか取得できません.行内および計算後のスタイルは取得できません.
まとめ:以上の3つのCSSが要素サイズを取得する方法は、要素のCSSサイズしか取得できませんが、要素自体の実際のサイズを取得できません.たとえば、内側余白(padding)、外側余白(margin)、枠線(border)、スクロールバー(scroll)を加えたサイズです.
 
二.要素の実際のサイズを取得する
テストコード:
HTMLセクション:



 
CSS部分:
#box {
        width:200px;
        height:200px;
        background:red;
        overflow:scroll;
}
1.clientWidthとclientHeight
このプロパティのセットは、エレメントのビジュアル領域のサイズを取得し、エレメントの内容と内側の余白が占める空間のサイズを取得します.
box.clientWidth;                                              //200
box.clientHeight;                                             //200
 
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
このプロパティのセットでは、スクロールコンテンツの要素サイズを取得できます.
box.scrollWidth;                                              //200
box.scrollWidth;                                              //200
 
PS:要素サイズが返され、デフォルトの単位はpxです.CSSの幅と高さが設定されていない場合は、計算された幅と高さが得られます.
PS:要素の実際のサイズについては、scrollWidthとscrollHeightは以下のように理解されています.
1.枠線を追加します.ブラウザによって説明が異なります.
a)FirefoxとOperaブラウザは枠線の大きさを増加し、220 x 220
b)ChromeとSafariブラウザは枠の大きさを無視し、200 x 200
c)IEブラウザは枠線を無視し、有効な内容の高さだけを表示し、200 x 18(単一「テストDiv」の高さは18)
2.内マージンを増加して、最終値はもとの大きさに内マージンの大きさをプラスして、220 x 220、IEは220 x 38です
3.スクロールバーを追加すると、最終値は元のサイズからスクロールバーのサイズを減算することに等しくなり、184 x 184、IE 184 x 18
4.外部情報を増加し、変化がない.
5.コンテンツオーバーフロー(スクロールバーがなければ、ブラウザによって互換性が異なるため、スクロールバーoverflow:scroll;)を追加する.Firefox、Chrome、IEは実際のコンテンツの高さを取得し、Operaは前の3つのブラウザよりも高さが小さく、Safariは前の3つのブラウザよりも高さが大きい.
 
3.offsetWidthとoffsetHeight(安定していて、使用頻度が高い!)
このプロパティのセットは、枠線、内側余白、スクロールバーを含む要素の実際のサイズを返します.
box.offsetWidth;                                             //200
box.offsetHeight;                                            //200
 
PS:要素サイズが返され、デフォルトの単位はpxです.CSSの幅と高さが設定されていない場合、計算された幅と高さが得られます.
PS:要素の実際のサイズについて、offsetWidthとoffsetHeightは次のように理解されています.
1.枠線を追加すると、最終値は元のサイズに枠線のサイズを加えて220になります.
2.内側の余白を増やすと、最終値は元の大きさに内側の余白の大きさを加えて220になります.
3.外部情報を増加し、変化がない.
4.スクロールバーを増やし、変化がなく、減少しない.
 
HTMLセクション:



 
CSS部分:
#box {
        width:200px;
        height:200px;
        background:red;
}
 
PS:要素サイズの取得には、一般的にブロック要素であり、CSSサイズを設定した要素が便利である.インラインエレメント(inline)やサイズが設定されていないエレメントは特に面倒なので、使用するときに注意することをお勧めします.
 
三.エレメント周辺のサイズを取得する
1.clientLeftとclientTop
このプロパティのセットでは、要素が左の枠線と上の枠線に設定されているサイズを取得できます.
box.clientLeft;//左枠の長さを取る
box.clientTop;//上枠の長さを取る
 
PS:現在はLeftとTopのセットしか提供されておらず、RightとBottomは提供されていません.4つのエッジ幅が異なる場合は、計算後のスタイルで直接取得するか、以上の3つの要素サイズの減算を用いて求めることができます.
 
2.offsetLeftとoffsetTop
この属性のセットでは、親要素に対する現在の要素の位置を取得できます.
       box.offsetLeft;                                                   
       box.offsetTop;                                                
 
PS:要素の現在の親要素に対する位置を取得するには、この要素を絶対位置position:absoluteに設定することが望ましい.そうでなければ、ブラウザによって説明が異なります.
PS:枠線と内側の余白を加えると位置に影響しませんが、外側の余白を加えると累積します.
 
box.offsetParent;//親要素を得る
 
PS:offsetParentでは、自分の親要素がの場合、非IEはbodyオブジェクトを返し、IEはhtmlオブジェクトを返します.2つの要素がネストされている場合、親要素が位置決めposition:absoluteを使用していない場合、offsetParentはbodyオブジェクトまたはhtmlオブジェクトを返します.したがって、offsetLeftとoffsetTopを取得する際には、CSSの位置決めが重要です.
 
もし、多くの階層で、外層が位置決めされているとしたら、私たちはどのようにして内層の要素がbodyまたはhtml要素からの距離を取得しますか?つまり、任意の要素がページから離れた位置を取得します.では、関数を記述し、遡上して累積を取得することで実現することができます.コードは次のとおりです.
//2階のみの場合:
box.offsetTop + box.offsetParent.offsetTop;        
//複数層の場合は、ループまたは再帰を使用する必要があります.

 1 function offsetLeft(element) {
 2 
 3        var left = element.offsetLeft;                     //       
 4 
 5        var parent = element.offsetParent;                 //        
 6 
 7       
 8 
 9        while (parent !== null) {                         //          
10 
11               left += parent.offsetLeft;                 //        
12 
13               parent = parent.offsetParent;              //        
14 
15        }                                                 //      
16 
17        return left;
18 
19 }

 
 
3.scrollTopとscrollLeft
このプロパティのセットでは、スクロールバーが非表示になっている領域のサイズを取得したり、その領域にナビゲートしたりすることができます.
box.scrollTop;//スクロールしたコンテンツの上の位置(つまり隠したコンテンツの高さ)を取得する
box.scrollLeft;//スクロール内容左の位置を取得する
 
スクロールバーを最初の位置にスクロールする場合は、次の関数を書きます.
function scrollStart(element) {
       if (element.scrollTop != 0) element.scrollTop = 0;//付与値は0;
}
 
DOMベースシリーズはこれで終わり、次の章はJavaScriptイベント、浮戒躁!
thank you very much ,MR Lee && my lover!