首页 > 其他 > 详细

offsetLeft offsetHeight offsetTop offsetWidth offsetParent学习笔记

时间:2015-07-25 02:12:57      阅读:262      评论:0      收藏:0      [点我收藏+]

自己想好好了解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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!