JavaScript中使用offset时遇到的bug

最新推荐文章于 2023-03-20 21:17:05 发布

Williamsgogogo

最新推荐文章于 2023-03-20 21:17:05 发布

阅读量286

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/tysearch/article/details/105424560

版权

#box {
        position: relative;
        margin: 50px auto;
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }
    #box div{
        position: absolute;
        left:100px;
        top:100px;
        width: 100px;
        height: 100px;
        padding: 30px;
        border: 5px solid #000000;
        background: red;
    }
</style>
<body>
    <div id = 'box'>
        <div class = 'div'></div>
    </div>
<script>
{
    let div = document.querySelector('.div');
    console.log(div.offsetWidth,div.offsetHeight);

}

	谷歌浏览器打印的结果是 169 169
	而实际offsetWidth = 100+30*2+5*2=170；offsetHeight =100+30*2+5*2=170；打印的结果比实际值少了1px。
	另外，改变父级box的border也会改变offsetWidth和offsetHeight的值，如把父级box的border改为2，打印的结果会变成171 171比实际结果多了1px。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Williamsgogogo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中使用offset时遇到的bug

#box { position: relative; margin: 50px auto; width: 500px; height: 500px; border: 1px solid #000; } #box div{ position: absolute; left:...
复制链接

扫一扫