更改动态创建的Div的CSS

Question

我的流程图面临着这种对齐问题。 我有从DB中选择的各个阶段，并根据各种标准创建div并将其放在屏幕上的absolute位置。

问题：此时的问题是，我正在为较小的屏幕设计此设置（宽度= 1280像素），但如果用户在较大的屏幕上看到该网站，则由于绝对布局而显示在左侧。我希望图表始终位于中心，因此修复left属性是一种解决方案。

所以我需要一个逻辑来动态修复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，但是因为我必须重新加载整个页面，所以会浪费掉一个电话。

提前致谢。

Answer 1

如果您希望无论屏幕大小如何都将图表居中，那么您可以将此CSS添加到.item而不是jQuery解决方案。

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

JS FIDDLE