获取dom元素的宽度和高度

一、获取css的大小

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;

以上三种方法都不行。

二、获取实际的大小

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.clientLeft 和 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; //获取滚动内容左方的位置