Sie einen linken Rand bewegt zum Zentrum in Javascript

Question

ich eine Veränderung in meinem aktuellen div so mache, dass ich eine vertikale Linie am Mitte meines div benötigen. Also, ich sah viele Lösungen, in dem sie einen linken Rand machen und mit Hilfe von links Eigenschaft, die sie bewegen sie 50% von der linken Seite (das ist eigentlich ist in der Mitte).

Hier ist, wie ich meine mache 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); 
} 

Meine Frage ist, wie ich es in dieMitte bewegen. Gibt es eine Möglichkeit, das zu tun?

ich versucht habe:

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

Aber nichts davon hilft. Kann mir jemand in die richtige Richtung zeigen?

HTML Datei:

<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> 

Aber ich bin mit dieser mehrfach gesch. Ich überprüfe hier auf der Basis von ID.

Ich möchte diese schwarze Linie wie in Bild gezeigt brauchen

Answer 1

Wenn Sie nur eine vertikale Linie auf die article Element fangen wir mit der einfachsten Lösung gehen addieren - CSS! Geben Sie zuerst das article Element und position: relative oder position: absolute ein. Fügen Sie dann ein :after psuedo-Element hinzu, um einen vertikalen Balken zu erstellen.

Die HTML und Javascript haben, sind unberührt (mit Ausnahme einer kleinen Änderung an den Grenzen auf dem Artikel), so dass Sie brauchen nur ein paar Zeilen CSS hinzuzufügen.

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

Ich fand Antwort. Wir können ein neues div verwenden, indem wir Javascript und einen neuen Klassennamen verwenden, der einen Rahmen links hat.

Dies ist meine Lösung

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; 
}