1,client
获取元素内容到边框的距离，效果和边框宽度相同
clientX和clientY是属性值
element.style.left=element.clientX;鼠标水平属性值
element.style.top=element.clientY;鼠标垂直属性值
clientLeft:broder(不含margin)
clientTop:broder(不含margin)
clientWidth:width+padding（不含边框）
clientHeight:height+padding（不含边框）
2,offset
offsetWidth:width+broder+padding(不含margin)(含垂直滚动条宽度)
offsetHeight:height+broder+padding(不含margin)(含水平滚动条宽度)
offsetTop:top-margintop(还是不含margin)
offsetLeft:left-marginleft(还是不含margin)
即使元素加上水平或垂直滚动条，offsetWidth跟offsetHeight的值是不会更改的，因为浏览器渲染时把滚动条的宽度（或高度）算在了元素本身的宽度（或高度）中了。
3,scroll
scrollWidth:文本宽度(包括由于溢出而无法展示在网页的不可见部分)
scrollHeight:文本高度(包括由于溢出而无法展示在网页的不可见部分)
scrollTop:右侧滚动条滚动的距离
scrollLeft:底部滚动条滚动的距离
4,pageX/Y(相对于文档边缘,包含滚动条距离)
element.style.left=element.pageX;鼠标水平属性值(相对于文档边缘,包含滚动条距离)
element.style.top=element.pageY;鼠标垂直属性值(相对于文档边缘,包含滚动条距离)
5,获取属性(存在兼容性问题)
window.getComputedStyle(ele,null)
currentStyle:IE专用(不支持伪类样式的获取)
6,可以获取指定属性的值
getPropertyValue方法
7,offsetParent
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。
对于offsetParent为body的情况，现在的主流浏览器IE8/9/10和Chrome及Firefox都跟定义
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。
封装动画ani(ele,json)
//动画库,ele,json对象(改变单个元素的多个属性,可以设置各自的目标属性值)
function ani(ele, json) {
clearInterval(ele.timer)//清除定时器
var step;
// 获取元素的属性兼容写法
ele.timer = setInterval(function () {//给该元素设置定时器
var flag = true; //默认动画全部完成,可以通过
for (var attr in json) {//对json的每个属性进行遍历
var current = parseInt(getCss(ele, attr));//将属性值的数字部分读取并存入自定义变量
target = json[attr];//将目标值存入自定义变量中
step = (target - current)/10;//步长设定为差量的十分之一
step=step>0?Math.ceil(step):Math.floor(step);//对步长进行分支判断,负数向下取整,正数向上取整
current+=step;//对步长进行累加赋给变量
ele.style[attr] = current + 'px';//对该元素的属性进行赋值,让它逐渐接近target
if(current!=target){ //如果偏移量还不到target
flag = false;//则让它不可清除计时器
}
}
if(flag){//
clearInterval(ele.timer)//清除定时器
}
console.log('目标值:'+target+"当前值:"+current+'step:'+step)
}, 50)
}
