offsetLeft offsetHeight offsetTop offsetWidth offsetParent学习笔记

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

 

 

 

你可能感兴趣的:(offsetheight)