提问人：George Silva 提问时间：10/10/2021 最后编辑：George Silva 更新时间：10/10/2021 访问量：171
在窗口加载时动态设置 div 位置
Dynamically set the div positions on window load
问：
我正在尝试设置我网站中 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 标签都放在一起。如下图所示，
我想了解需要更改什么才能正确呈现布局，如下所示
答：
0赞
Reflective
10/10/2021
#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};
}`;
评论
0赞
George Silva
10/10/2021
是的，我的错误谢谢你，我纠正了它，但我不认为这是问题所在，因为我仍然得到相同的输出
0赞
Reflective
10/10/2021
现在你的CSS可以工作了，直到现在它只是被忽略了。更正它以满足您的要求。如果有代码片段，我会纠正它，但我不确定应该实现什么。你应该自己做。
0赞
George Silva
10/10/2021
我明白了，我实际上包含了一个新图像来显示布局现在应该如何实际呈现
评论