布局转换

最新推荐文章于 2021-02-15 11:28:26 发布

~嘘~禁止想象~

最新推荐文章于 2021-02-15 11:28:26 发布

阅读量185

点赞数 1

分类专栏： # JavaScript小练习前端

本文链接：https://blog.csdn.net/weixin_45773503/article/details/113323187

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

应用场景：在某些情况下我们需要将浮动布局转换成为定位布局，以实现动画效果。
我们通过给父级设置postion属性，使用offsetTop和offsetLeft获取位置后赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 100px;
            width: 500px;
            height: 500px;
            background-color: black;
            position: relative;
        }
        
        li {
            float: left;
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* text-decoration: none; */
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ali = document.getElementsByTagName("li");
        var arr = [];
        for (var i = 0; i < ali.length; i++) {
            var obj = {};
            obj.left = ali[i].offsetLeft; //获取到的是最近的定位父级的距离位置
            obj.top = ali[i].offsetTop;
            arr.push(obj);
        }
        for (var i = 0; i < ali.length; i++) {
            ali[i].style.position = "absolute";
            ali[i].style.left = arr[i].left + "px";
            ali[i].style.top = arr[i].top + "px";
        }
    </script>
</body>

</html>