dom要素の幅と高さを取得するには

dom要素の幅と高さを取得し、cssのサイズを取得します.
1.第1のインラインスタイル

var box = document.getElementById('box');
var w = box.style.width;
var h = box.style.height;

2.要素のサイズを計算する(ただしieの場合、widhtとheightのcssを書かずにautoに戻るという問題がある).

var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
var w = style.width;
var h = style.height;

3.CSSStyleSheetオブジェクトのcssRules(またはrules)プロパティから要素サイズを取得します(ただし、計算されたスタイルは取得できません).

var sheet = document.styleSheets[0];
var rule = (sheet.cssRules || sheet.rules)[0];
var w = rule.style.width;
var h = rule.style.height;

以上の3つの方法はいずれもだめだ.
二、実際のサイズを取得する
1.clientWidthとclientHeight

var w = box.clientWidth;
var h = box.clientHeight;

説明:paddingとscrollが変動してこそ、変化があります.
2.scrollWidthとbox.scrollHeight;

var w = box.scrollWidth;
var h = box.scrollHeight;

説明,1)border変化,ブラウザによる変化2)padding変化,変化3)margin変化,変化なし
3.offsetWidthとoffsetHeight

var w = box.scrollWidth;
var h = box.scrollHeight;

説明、paddingとborderは変動して、やっと変化があります
三、要素の周変の距離を取得する(本来は左と上からしかできない)
1.clientUpとclientTopという属性のグループは、要素が左の枠線と上の枠線のサイズを設定していることを取得します.

var l = box.clientLeft;
var t = box.clientTop;

2.親要素に対する相対的な位置の取得

var l = box.offsetLeft;
var t = box.offsetTop;
var parent = box.offsetParent;  //      ，  body

説明、position:absoluteがなければ;ブラウザごとに異なる解釈がある場合
では、多層の要素からbodyまたはhtmlまでの距離を取得します.コードは次のとおりです.
function offsetLeft(element){ var left = element.offsetLeft; var parent = element.offsetParent;

    while(parent!== null){
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return left;
}

3.
//このプロパティのセットでは、スクロールバーが非表示になっている領域のサイズを取得したり、その領域にナビゲートしたりすることができます.box.scrollTop;//スクロール内容の上の位置boxを取得する.scrollLeft;//スクロール内容の左の位置を取得