javascript - 在窗口加载时动态设置 div 位置

Question

我正在尝试设置网站中 div 标签的位置。加载网页时，我编写了一个方法来从我的数据库中获取现有的 div 标签。我这样做的原因是因为 div 标签的位置需要改变。因此当前的 div 标签顺序存储在数据库中。我用来动态改变div标签的函数如下，这个方法是在调用Window.onLoad()之后执行的

function changeDivPosition (){

    getNewPosts().then(data=>{


        for(var i=0;i<data.newPosts.length;i++) {
            var divId=data.newPosts[i].id
            var divX=data.newPosts[i].xPosition;
            var divY=data.newPosts[i].yPosition;
            console.log(divId,divX,divY)
            var styles = `${'#'+divId}{
                           display:flex;
                           flex-wrap: wrap;
                           flex-direction:row;
                            align-content: space-around;
                            order: ${i};
                           };
                             }`
            $('#'+divId).offset({top:divY, left:divX});
            console.log(styles)
            var styleSheet = document.createElement("style")
            styleSheet.type = "text/css"
            styleSheet.innerText = styles
            document.head.appendChild(styleSheet)


        }

    })
}

“data”数组检索json数据如下，

 0: {_id: '61371ea7d14cd809b8cf3872',  id: 'mostPop', xPosition: 285, yPosition: -328.6000061035156}
1: {_id: '61371fe4d14cd809b8cf388c', id: 'sidebar-wrapper', xPosition: 0, yPosition: 0}
2: {_id: '61371ea9d14cd809b8cf387e',  id: 'itemDiscount', xPosition: 285, yPosition: 217.1999969482422}
3: {_id: '61371fe9d14cd809b8cf388e',  id: 'newArr', xPosition: 285, yPosition: 20}

这个方法设法改变了我想要的 div 标签的顺序，但是即使我设置了 X 和 Y 坐标，所有的 div 标签都被定位在一起。如下图所示，

我想了解需要更改哪些内容才能正确呈现布局，如下所示

Answer 1

至少您正在生成并附加无效的 CSS 规则。让我们将示例简化为问题部分：

var divId = 'mostPop'; 
var i = 1; 
var css = 
`${'#'+divId}{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    align-content: space-around;
    order: ${i};
    };
}`;
console.log(css);

输出：

#mostPop{
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  align-content: space-around;
  order: 1;
  };
}

你能看出 CSS 规则有什么问题吗？一个额外的};

它应该是：

var styles = 
   `${'#'+divId}{
      display:flex;
      flex-wrap: wrap;
      flex-direction:row;
      align-content: space-around;
      order: ${i};
    }`;