js offset系列属性作用

最新推荐文章于 2022-09-09 22:23:15 发布

黄大仙No.1

最新推荐文章于 2022-09-09 22:23:15 发布

阅读量374

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107874725

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素,如果父级元素都没有定位返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容去的宽度，返回数值不带单位
element.offsetHeight	返回包括padding、边框、内容区的高度，返回值不带单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 150px;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            margin-left: 45px;
        }
        .w {
            height: 200px;
            background-color: pink;
            margin:0 5px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<div class="w"></div>
<script>
    var father=document.querySelector('.father');
    var son=document.querySelector('.son')
    console.log(father.offsetTop);
    console.log(father.offsetLeft);
    console.log(son.offsetLeft);        //获取相对带有定位的父元素的偏移
    console.log(son.offsetTop);
    var w=document.querySelector('.w');
    console.log(w.offsetWidth);         //获取元素大小,包含padding border width
    console.log(w.offsetHeight);
    console.log(son.offsetParent);      //返回带有定位的父亲     //position
</script>
</body>
</html>

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js offset系列属性作用

offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素,如果父级元素都没有定位返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding、边框、内容去的宽度，返回数值不带单位element.offsetHeight返回包括padding、边框、内容区的高...
复制链接

扫一扫