JS之DOM3

最新推荐文章于 2022-05-25 23:53:59 发布

SBTR123456

最新推荐文章于 2022-05-25 23:53:59 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/xubj/p/7992735.html

版权

getBoundingClientRect

作用：获取元素盒模型的一些信息，得到的结果是没有单位，不包含滚动条的

width 宽度（包含边框，内边距）

height 高度（包含边框，内边距）

left 元素最左边到可视区的最左边的距离

right 元素的最右边到可视区最左边的距离

top 元素的最上边到可视区最上边的距离

bottom 元素的最下边到可视区的最上边的距离

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #box{
        width:100px;
        height: 100px;
        background: #f00;
        padding: 20px;
        position: absolute;
        left:300px;
        top:200px;
        border:10px solid #000;
    }
    </style>
</head>
<body>
    <dib id="box"></dib>

</body>
</html>

var box=document.getElementById("box");
var res=box.getBoundingClientRect();
console.log(res.width);// 160 包括边框,内边距
console.log(res.height); // 160 包括边框
console.log(res.left); // 300
console.log(res.right); // 460
console.log(res.top); //200
console.log(res.bottom); // 360
</script>

PS：附上一张自己动手画的图好理解一点

转载于:https://www.cnblogs.com/xubj/p/7992735.html

SBTR123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之DOM3

getBoundingClientRect作用：获取元素盒模型的一些信息，得到的结果是没有单位，不包含滚动条的width 宽度（包含边框，内边距）height 高度（包含边框，内边距）left 元素最左边到可视区的最左边的距离right 元素的最右边到可视区最左边的距离top 元素的最上边到可视区最上边的...
复制链接

扫一扫