Offset

<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值

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值