Javascript 更改动态创建的div的CSS

我用我的流程图面对这个对齐问题。 我从DB中选择了不同的阶段，并根据不同的标准创建div，并将其置于屏幕上的

绝对位置

问题：目前的问题是，我正在为较小的屏幕（宽度=1280px）设计该网站，但如果用户在较大的屏幕上看到该网站，则由于绝对布局，该网站会向左移动。我希望图表始终居中，因此修复
left
属性是一种解决方案

.item{
  position:absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, 0%);
}

因此，我需要一个逻辑来修复css，即根据屏幕大小动态修改“left”

属性

到目前为止，我做到了这一点，但它不起作用

$(document).ready(function() {
    var textFromController = [[${divText}]];
    $('.container').append(textFromController);
     var windowWidth = $(window).width(); 
     if(windowWidth > 1280){
         $(".item").css("left",  $(".item").css("left") + (windowWidth - 1280)/2);
     }
});

我在控制器端做所有的计算，所以我实际上不能在那里做任何事情。我也尝试过AJAX，但是由于我必须重新加载整个页面，因此浪费了1次调用

---

提前感谢。

如果您希望在不考虑屏幕大小的情况下将图表居中，则可以将此CSS添加到

.item

而不是jQuery解决方案中

.item{
  position:absolute;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, 0%);
}

---

媒体查询对此没有帮助吗？您不需要使用javascript@Sai定位是绝对的，所以我不确定这会有什么帮助。然后我必须创建2或3个不同的图表集。如果我错了，请纠正我。这可以用纯CSS解决，只需在更大的屏幕上工作，然后调整窗口大小，看看它在更小的屏幕上的行为：简而言之，就是谷歌媒体查询。基本上，媒体查询的任务是找出视口的宽度，并应用为特定宽度大小指定的CSS样式这是什么

[${divText}]]

？从未见过这种语法…我正在从controller为每个

div

发送

top

和

left

，所以我不知道这将如何工作。@ADi可能我不理解您的jQuery。我从CSS中删除了

top

，并更新了小提琴。我想你可以把代码中的

windowWidth

jQuery变量部分去掉，然后将它应用到

。item

你需要从控制器发送顶部和左侧的值吗？