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