DOM获取元素大小

1.style获取行内的元素大小
    var box = document.getElementById('box');
    alert(typeof box.style.width);
    alert(box.style.height);

2.获取计算后的CSS大小，如果没有设置，非IE会获取默认大小，IE会理解为0
    var style = window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
    alert(style.width);
    alert(style.height);

3.使用CSSStyleSheet对象中的cssRules属性（rules）
  PS:cssRules(rule)只能获取到内联和链接样式的宽和高，不能获取行内和计算后的样式
    var sheet = document.styleSheets[0];
    var rule = (sheet.cssRules||sheet.rules)[0];
    alert(rule.style.width);
    alert(rule.style.height); 
总结：这三种都不能获取实际大小（比如设置一个内边距，获取大的大小不会包含内边距）

获取实际大小

1.（clientWidth和clientHeight）即获取的是元素可视区域的大小
    alert(box.clientWidth);   //没有单位，但默认是px
    alert(box.clientHeight);  
    //alert(typeof box.clientHeight); //number ,返回的数据类型是数字，不是字符串了
    //如果设置了其他的单位，返回出来的结果还会转换为px像素
    //增加边框和外边距，无变化，是不算在clientWidth 和clientHeight的实际大小里面的
    //内边距会增加实际大小，最终值等于原本大小+内边距的大小
    //增加滚动条会减少实际大小，最终值等于原来的值减去滚动条的大小
    //在没有内边距和滚动条的情况下，没有设置CSS大小，那么IE为理解为0
2.scrollWidth scrollHeight 获取的是滚动内容的元素大小（不太稳定）
    alert(box.scrollWidth);
    alert(box.scrollHeight);
    //增加边框 不同的浏览器有不同的解释
    //增加内边距 最终值等于原本大小+内边距的大小
    //增加外边距 无变化
    //增加滚动条，最终值会等于原本大小减去滚动条的大小
    //如果文本溢出，没加滚动条，不同的浏览器也不太兼容
    //有溢出 加上滚动条方可兼容（ps：我的不兼容）

3. offsetWidth offsetHeight 这组属性返回元素实际大小
    alert(box.offsetWidth);
    alert(box.offsetHeight);
    //ps:这组属性稳定性好
    //增加边框，最终值等于原本大小加上边框大小
    //增加内边距，最终智等于原本大小加上内边距大小
    //增加外边距和滚动条，无变化

获取元素周边大小

1.clientLeft和clientTop  获取元素设置了左边框和上边框的大小
   alert(box.clientTop);   //获取左边框的长度
   alert(box.clientLeft);  //获取上边框的长度

2.offsetLeft 和offsetTop   //则组属性获取当前元素相对于父元素的位置
    alert(box.offsetLeft);  
    alert(box.offsetTop); 
    //PS:获取当前相对于父元素的位置，最好将它设为定位position：absolute；否则不同的浏览器会有不同的解释  
    //加上边框和内边距不会影响它的位置，但加上外边距会累加 

    //alert(box.offsetParent.tagName); //获取父元素
    //如果没有设置定位 会产生很多问题
    // alert(box.offsetTop+box.offsetParent.offsetTop);// 求出box距离页面口直接的距离
    alert(offsetTop(box))

 //如果有多层 累加
function offsetTop(element){
  var top = element.offsetTop;   //第一层的距离
  var parent = element.offsetParent;
  while(parent!==null){
    top+=parent.offsetTop;
    parent = parent.offsetParent;
  }
  return top;

}

3. scrollTop 和scrollLeft  //这组属性可以设置滚动条被隐藏的区域大小，也可设置定位到该区域
    //alert(box.scrollTop);
    //alert(box.scrollLeft);
    //box.scrollTop=100;
    //alert(box.scrollTop);
    box.scrollTop=35;

//如果不在0的位置 让它回到0位置
function scrollStart (element) {
    if (element.scrollTop!==0) {
        element.scrollTop=0;
    }
}