将左边框移至javascript

Question

我正在对当前div进行更改，以便在div的中间处需要垂直线。所以，我看到许多解决方案，他们正在制作一个左边框，在左边属性的帮助下，他们正在移动左边的 50％（实际上是中间）。

以下是我如何制作 div:

if (id == "Metricbar" ) {
      var Parentdiv = document.getElementById("homeContainer");
      var rowDiv = document.createElement("article");
      rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
      rowDiv.style.border = "1px solid #ddd";
      rowDiv.style.marginBottom = "1px";
      rowDiv.style.marginTop = "1px";
      rowDiv.style.borderLeft = "2px solid #ddd";
      Parentdiv.appendChild(rowDiv);


      var ctrlDiv = document.createElement("div");
      ctrlDiv.setAttribute("data-widget-editbutton", "false");
      ctrlDiv.className = "jarviswidget";
      ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
      ctrlDiv.id = id;
      var temp = $compile(ctrlDiv)($scope);
      angular.element(rowDiv).append(temp);
      rowDiv.appendChild(ctrlDiv);
} 

我的问题是如何将其移至中心。有没有办法做到这一点？

我尝试过：

rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";

但这一切都没有帮助。任何人都可以指出我正确的方向。

HTML文件：

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
   <div class="row" id="homeContainer"></div>
   <div class="modaldialogs" style="display: none">
      <div class="center">
         <img alt="" src="img/ajax-loader.gif" />
      </div>
   </div>
</section>

但我多次使用这个div。我在这里检查id。

我想要这条黑线，如图片所示

Answer 1

如果您只需要在article元素中添加一条垂直线，那么让我们选择最简单的解决方案 - CSS！

首先，提供article元素和position: relative或position: absolute。然后添加一个:after伪元素来创建一个垂直条。

HTML和Javascript没有受到影响（除了文章边框的小改动），所以你只需要添加几行CSS。

 var Parentdiv = document.getElementById("homeContainer");
 var rowDiv = document.createElement("article");
 rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
 rowDiv.style.marginBottom = "1px";
 rowDiv.style.marginTop = "1px";
 rowDiv.style.borderTop = "2px solid #ddd";
 rowDiv.style.borderRight = "2px solid #ddd";
 rowDiv.style.borderBottom = "2px solid #ddd";
 rowDiv.style.borderLeft = "2px solid #ddd";
 Parentdiv.appendChild(rowDiv);

#homeContainer article {
  height: 300px;           // Just for demo purposes since we have no content
  position: relative;
}

#homeContainer article:after {
  content: "";
  height: 100%;
  width: 0px;
  position: absolute;
  border-right: 3px solid #000000;
  right: 50%;
}

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
  <div class="row" id="homeContainer"></div>
  <div class="modaldialogs" style="display: none">
    <div class="center">
      <img alt="" src="img/ajax-loader.gif" />
    </div>
  </div>
</section>

Answer 2

我找到了答案。我们可以通过使用javascript和一个具有border-left的新类名来获得一个新的div。

这是我的解决方案

var element = document.createElement('div');
element.className = "divider";
rowDiv.appendChild(element); \\appending it to parent

CSS

.divider {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  bottom: 0;
  left: 45%;
  border-left: 2px solid #C0C0C0;
}