自己的实验中，给每个div设置了边框，导致div回复不了初始位置，请问怎么解决有边框的时候恢复初始位置？

//百度之后知道offsetWidth包含了边框厚度，请问怎么解决有边框的时候恢复初始位置？
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            display: block;
        }
        li {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin-top: 20px;
            border: 1px solid;
        }
    </style>
    <script>
        window.onload = function () {
            var list = document.getElementsByTagName("li");
            for (var i = 0; i < list.length; i++) {
                list[i].timer = null;
                list[i].onmouseover = function () {
                    oMove(this, 400);
                }
                list[i].onmouseout = function () {
                    oMove(this, 200);
                }
            }
            function oMove(obj, iTag) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var speed = (iTag - obj.offsetWidth) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (obj.offsetWidth == iTag) {
                        console.log(obj.offsetWidth);
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = obj.offsetWidth + speed + 'px';
                    }
                }, 30);
            }
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

wuzhoubo

浏览 1628回答 2

2回答

Halo_

box-sizing:border-box;

1 0

慕郎_莲华

记得选择代码语言哦你设置宽度的时候减去边框的宽度就好了

0 0

随时随地看视频慕课网APP