获取dom元素的宽度和高度

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