javascript - 更改动态创建的 Div 的 CSS

Question

我的流程图面临着对齐问题。我从数据库中选择了不同的阶段，并根据不同的标准创建了 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);
     }
});

我在 Controller 端进行所有计算，所以我实际上无法在那里做任何事情。我也尝试了 AJAX，但由于我必须重新加载整个页面，因此浪费了 1 个调用。

提前致谢。

Answer 1

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

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

JS FIDDLE