Offset

最新推荐文章于 2022-04-24 18:33:13 发布

S_xiajinghan

最新推荐文章于 2022-04-24 18:33:13 发布

阅读量336

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/S_xiajinghan/article/details/79097885

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<script>

    my$("btn").οnclick=function () {
        //行内样式设置元素的样式属性值,通过下面的方式是可以获取到的,都是字符串类型
        //如果是在style标签中设置元素样式的属性值,下面方式是获取不到
        console.log(my$("dv").style.left);
        console.log(my$("dv").style.top);
        console.log(my$("dv").style.width);
        console.log(my$("dv").style.height);

        //获取元素的样式通过offsetLeft和offsetTop都可以获取元素的left和top的值

        console.log(my$("dv").offsetLeft);
        console.log(my$("dv").offsetTop);
        console.log(my$("dv").offsetWidth);

         console.log(my$("dv").offsetHeight);

};

        * offset系列:
        * offsetLeft:当前元素距离左边的像素
        * offsetTop:当前元素距离上面的像素
        * offsetWidth:当前元素的宽度(包括边框)
        * offsetHeight:当前元素的高度(包括边框)
        offsetLeft: 父级元素的边框,父级元素的margin-left,父级元素的padding,子级元素(自己)的margin-left
    
        如果父级元素脱离文档流(脱标),设置了父级元素的left值,此时的子级元素是相对于父级元素的:0

        父级元素和子级元素同时脱离文档流,此时子级元素的offsetLeft值是设置的left值

        子级元素脱离文档流,父级元素没有脱离文档流,此时子级元素的offsetLeft获取的脱标后的left值