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;
}
}