布局转换

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

布局转换_第1张图片
布局转换_第2张图片

你可能感兴趣的:(#,JavaScript小练习)