自己想好好了解offset属性,自己写了demo,供大家学习
?
<body> <div style="position: absolute;top:50%;left: 50%;width: 200px;height: 200px;border: 1px solid red;" id="parentId"> <div style="width: 100px;height: 100px;border: 1px solid blue; margin-top:10px;padding-top: 20px;padding-left: 30px;margin-left: 40px;" id="sonId"> dasfdsaf </div> </div> </body> <script> $(function(){ $("#parentId").on("click",function(event){ // alert(event.type); //offsetLeft获取最近的父容器的距当前控件左边(不包含margin)的距离, console.info("parent : " + this.offsetLeft);//根据实际情况来显示 //offsetTop获取最近的父容器的距当前控件上边(不包含margin)的距离, console.info("parent offsetTop: " + this.offsetTop);//根据实际情况来显示 //offsetHeight获取当前控件的高度 = 控件高度 + border高度 + padding(上下) console.info("parent offsetHeight: " + this.offsetHeight);//202 = height: 200px;上下边线2px //offsetWidth获取当前控件的高度 = 控件宽度 + border宽度+ padding(左右) console.info("parent offsetWidth: " + this.offsetWidth);//202 = width: 200px;左右边线2px //返回当前对象的父控件 console.info("parent offsetParent: " + this.offsetParent);//body控件 }); $("#sonId").on("click",function(event){ // alert(event.type); console.info("son offsetLeft: " + this.offsetLeft);//margin-left: 40px console.info("son offsetHeight: " + this.offsetHeight);//122 = height: 100px;padding-top: 20px;上下边线2px console.info("son offsetTop: " + this.offsetTop);//margin-top:10px; console.info("son offsetWidth: " + this.offsetWidth);//132px = width: 100px;padding-left: 30px;左右边线2px console.info("son offsetParent: " + this.offsetParent);//得到的是div#parentId控件 }); }); </script>
?
?
?
offsetLeft offsetHeight offsetTop offsetWidth offsetParent学习笔记
原文:http://hbiao68.iteye.com/blog/2229995